Question

我正在尝试使用“向上移动”和“向下移动”按钮创建单页，这会将窗口滚动到下一个或上一个部分（div）。方法，我用的很简单。例如，我有5个带有特殊ID的元素。我使用jquery创建一个名为“pos”的数组，其中我保存所有元素的位置。单击“向上移动”和“向下移动”按钮我检查此数组，如果它包含值更低或更高的位置 - 窗口滚动。

我创建了jfiddle，所以你可以在这里查看这个例子 - http://jsfiddle.net/YbqAB/

它适用于jfiddle网站，但在我的页面上“向下移动”按钮不会滚动窗口当$（窗口）.scrollTop（）值等于当前位置，即使存在下一个位置。这个问题不是一成不变的 - 我多次重新翻页（CTRL + F5），有时候我会看到这个问题，有时候不会。·
所以，例如，如果我有4个div位置：0px，300px，500px，800px，当我点击“向下移动”按钮时，窗口成功滚动到div为300px。但当我再次点击“向下移动”按钮移动到500px位置的下一个div时 - 没有任何反应。如果我用鼠标滚轮滚动窗口，向下几个像素，“向下移动”按钮再次运行良好，并将窗口滚动到div为500px。

我做错了什么？或许也许有人知道更简单的解决方案感谢。

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;
        }
    });         
});

Answer 1

有时，浏览器使用0px < val px < 1px像素。

我的猜测是jquery动画滚动到一个值，例如。 window.scrollTop = 499.9，目的地为500。

因此if( $(window).scrollTop() < v ){评估与以前相同。

要检查这一点，您可以替换

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

与

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

要查看生成的scrollTop值，并检查这是否是问题。

但由于我无法重现你的问题，这仍然是一个猜测。

除此之外，我建议您通过处理程序进行调试，以查看滚动的触发时间，并找出它为什么会这样做。

Jquery ScrollTop动画问题

1 个答案: