jQuery ScrollTop动画问题 [英] Jquery ScrollTop animation issue

问题描述

我正在尝试使用向上移动"和向下移动"按钮创建单个页面，这会将窗口滚动到下一个或上一个部分(div).我使用的方法很简单.例如，我有5个具有特殊ID的元素.我使用jquery创建一个名称为"pos"的数组，在其中保存所有元素的位置.单击以向上移动"和向下移动"按钮，我检查此数组以及它是否包含具有较低或较高值的位置-窗口滚动.

我创建了jfiddle，因此您可以在此处查看此示例- http://jsfiddle.net/YbqAB/

它在jfiddle网站上有效，但是在我的页面上，当$(window).scrollTop()值等于当前位置时，即使存在下一个位置，向下移动"按钮也不会滚动窗口.这个问题不是一成不变的-我经常重访页面(CTRL + F5)，有时我看到此问题，有时却看不到.

因此，例如，如果我有4个div，其位置分别为:0px，300px，500px，800px，并且当我单击向下移动"按钮时，窗口将成功滚动到具有300px的div.但是，当我再次单击下移"按钮以移动到具有500px位置的下一个div时，没有任何反应.如果我用鼠标滚轮向下滚动窗口，只向下移动了几个像素，则向下移动"按钮将再次正常工作，并将窗口滚动到div为500px.

我做错了什么?也许有人知道更简单的解决方案.谢谢.

I'm trying to create single page with "move up" and "move down" buttons, which will scroll window to next or previous section (div). Method, which I use is simple. For example I have 5 elements with special ids. I create an array with name "pos" using jquery, where I hold all elements' positions. Clicking to "move up" and "move down" buttons I check this array and if it contains position with lower or higher value - window scrolls.

I created jfiddle, so you can check this example here - http://jsfiddle.net/YbqAB/

It works on jfiddle site, but on my page "move down" button doesn't scroll window when $(window).scrollTop() value equals to current position, even if exist next position. This issue is not constant - I refrest page (CTRL + F5) a lot of times and sometimes I see this issue, sometimes not.

So, for example if I have 4 div with positions: 0px, 300px, 500px, 800px and when I'm clicking "move down" button, window successfully scrolls to div with 300px. But when I'm clicking to "move down" button once again to move to next div with 500px position - nothing happens. IF I scroll window with my mouse wheel, just few pixels down, "move down" button works well again and scrolls window to div with 500px.

What I did wrong? Or maybe anyone knows more simple solution. Thanks.

HTML:

<div id="buttons">
    <div id="top-button"> up </div>
    <div id="bottom-button"> down </div>
</div>

<div id="position1"> First block </div>
<div id="position2"> Second block </div>
<div id="position3"> Third block </div>
<div id="position4"> Fourth block </div>
<div id="position5"> Fifth block </div>

CSS:

#buttons{
    position: fixed;
    right: 10px;
    top: 50%;
}

#top-button,
#bottom-button{
    width: 40px;
    height: 40px;
    background: orange;
    margin-bottom: 10px;
    font-size: 11px;
    text-align: center;
    line-height: 40px;
    color: yellow;
}

#position1,
#position2,
#position3,
#position4,
#position5{
    width: 100%;
    height: 400px;
    color: white;
    text-align: center;
    background: green;
    border-bottom: 5px solid yellow;
    padding-top: 20px;
}

jQuery:

var pos = [ 
    0,
    $("#position2").offset().top, 
    $("#position3").offset().top, 
    $("#position4").offset().top,
    $("#position5").offset().top
];

var $root = $('html, body');
var current;

$("#buttons #top-button").click(function () {
    $.each(pos, function(i,v){
        if( v < $(window).scrollTop() ){
            current = v;
        }
    });
    $root.stop(true,true).animate({scrollTop:current},500);         
});

$("#buttons #bottom-button").click(function () {
    $.each( pos, function(i,v){
        if( $(window).scrollTop() < v  ){
            $root.stop( true,true ).animate( {scrollTop: v}, 500);
            return false;
        }
    });         
});

推荐答案

有时浏览器使用 0px<val px<1px .

我的猜测是，jQuery动画会滚动到一个值，例如. window.scrollTop = 499.9 ，而目标是 500 .

My guess would be that the jquery animate scrolls to a value eg. window.scrollTop = 499.9 while the destination is 500.

因此， if($(window).scrollTop()< v){的计算结果与之前相同.

Therefore if( $(window).scrollTop() < v ){ evaluates to the same as before.

要对此进行检查，您可以替换

To check this you could replace

   $root.stop(true,true).animate({scrollTop: v},500);

使用

    $root.stop(true,true).animate({scrollTop: v},500, function(){console.log($(window).scrollTop());});

查看生成的 scrollTop 值，并检查是否是问题所在.

To see the resulting scrollTop value, and to check if this is the problem.

但是由于我无法重现您的问题，所以这仍然是一个猜测.

But since I cannot reproduce your problem this is still a guess.

除此之外，我建议通过您的处理程序进行调试，以查看滚动被触发的时间，并找出其作用的原因.

Other than that, I'd recommend debugging through your handlers, to see when the scroll is triggered, and find out why it does what it does.

这篇关于jQuery ScrollTop动画问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！