滚动到顶部不起作用


                    

你好,我是jQuery的新手,但我遇到了问题!
我想滚动到通过AJAX调用加载的页面的顶部。</ p>

这有效(测试):</ p>

  $(document).on('click','#top_icon',function(){
     警报('确定');
});
</ code> </ pre>

但这不起作用(这是我想要实现的):</ p>

  $(document).on('click','#top_icon',function(){
     $('html,body')。animate({scrollTop:'0px'},800);
});
</ code> </ pre>
     </ div>

展开原文

原文

Hello I am new to jQuery and I have a problem! I want to scroll to the top, in a page that is loaded via AJAX call.

This works (test):

$(document).on('click', '#top_icon', function() {
    alert('ok');
});

But this is not working (this is what I want to achieve):

$(document).on('click', '#top_icon', function() {
    $('html, body').animate({scrollTop: '0px'}, 800);
});

2个回答


尝试一下,</ p>

  $(document).on('click','#top_icon',function(){
     $('html,body')。animate({'scrollTop':'0px'},800);
     返回false;
});
</ code> </ pre>

scrollTop </ code>在您的情况下为未定义</ code>。</ p>
     </ div>

展开原文

原文

Try this,

$(document).on('click', '#top_icon', function() {
    $('html, body').animate({'scrollTop': '0px'}, 800);
    return false;
});

scrollTop is undefined in your case.


我不确定jQuery,但是scrollTop不是CSS属性,因此它可能不是可以动画化的属性的一部分。</ p>

但是您可以自己为此创建一个简单的动画:</ p>

  var startValue = 0;
var endValue = 0;
var duration = 800;
var distance = 0;
变速度= 0;
var step = 0;
var endTime = 0;

var animate = function(){

     var elapsedTime = new Date()。getTime()-步骤;
     document.body.scrollTop + =速度* elapsedTime;
     步骤= new Date()。getTime();

     如果(step> endTime)
         document.body.scrollTop = endValue;
     其他
         setTimeout(animate,15);

}

     yourButton.onclick = function(){

         startValue = document.body.scrollTop;
         distance = endValue-startValue;
         速度=距离/持续时间;
         步骤= new Date()。getTime();
         endTime =步骤+持续时间;
         animate();

     };
</ code> </ pre>


这是一个小提琴: http://jsfiddle.net/pXvQG/12/ ,通过向下滚动进行动画处理 然后单击主体。</ p>
     </ div>

展开原文

原文

I am not sure about jQuery, but scrollTop is not a CSS property and therefor might not be part of the properties that can be animated.

But you can create a simple animation for this yourself:

var startValue = 0;
var endValue = 0;
var duration = 800;
var distance = 0;
var velocity = 0;
var step = 0;
var endTime = 0;

var animate = function() {

    var elapsedTime = new Date().getTime() - step;
    document.body.scrollTop += velocity * elapsedTime;
    step = new Date().getTime();

    if (step > endTime)
        document.body.scrollTop = endValue;
    else
        setTimeout(animate, 15);

}

    yourButton.onclick = function() {

        startValue = document.body.scrollTop;
        distance = endValue - startValue;
        velocity = distance / duration;
        step = new Date().getTime();
        endTime = step + duration;
        animate();   

    };

​ Here is a fiddle: http://jsfiddle.net/pXvQG/12/, animate by scrolling down and click the body.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐