0



我正在尝试使用“上移”和“下移”按钮创建单个页面，这会将窗口滚动到下一个或上一个部分（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 时 - 没有任何反应。如果我用鼠标滚轮滚动窗口，只向下几个像素，“向下移动”按钮再次运行良好，并将窗口滚动到 500px 的 div。

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

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

查询：

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

1 回答 1

0

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

我的猜测是 jquery animate 滚动到一个值，例如。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值，并检查这是否是问题所在。

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

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

于 2013-07-01T15:11:13.863 回答