jQuery滚动条问题

Question

我目前正在尝试实现一个向上和向下按钮(浮动菜单)在我的投资组合网站上滚动一定数量的页面。例如，我会点击向下按钮，它会向下滚动100px，反之亦然。

我目前正在使用此代码在单击按钮时滚动到特定的锚点，但我只想修改它，以便在单击时向上或向下移动一定数量的像素。

$(document).ready(function(){
    $('a[href*=#jump]').click(function() {
        if (location.pathname.replace(/^\//,") == this.pathname.replace(/^\//,") && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});

html中的当前链接是：<a class="jump" href="#jump">Back To Top</a>

它滚动到锚点：<a id="jump" href="#"></a>

我假设有人会马上知道我的意思，但如果你需要更多细节，我可以提供一个例子来说明我正在努力实现的目标。如果能帮上忙，我们将不胜感激。

Answer 1

您可以使用jQuery的scrollTop()来调整滚动垂直滚动条。

例如，如果用于向下滚动的按钮的id为scrollDownButton，而您想要将页面向下滚动100px，那么下面的代码就可以做到这一点。

$('#scrollDownButton').click( function() {
    var currPosition = $('body').scrollTop();
    $('body').scrollTop(currPosition + 10);
});

scrollTop()会给你垂直滚动条的当前位置，scrollTop(value)会把它设置到给定的位置。

如果要向上滚动页面，则从当前值中减去，而不是相加。

注意：您希望选择具有滚动条的任何元素。在上面的示例中，它是<body>，但<html>也是一个常见的元素。此外，JQuery 1.2.6中实现了scrollTop()，请确保您的版本足够新。

更新:如何设置滚动的动画。

如果你想让滚动动画发生，而不是跳下或跳上，你可以使用下面的代码：

$('#scrollDownButton').click( function() {
    var currPosition = $('body').scrollTop();
    $('body').animate({scrollTop: currPosition+100}, 'slow');
})

Ryan的更新

以下是您的特定页面的代码。

$('document').ready( function() {
    $('#scrollDownButton').click( function() {
        var currPosition = $('html').scrollTop();
        $('html').animate({scrollTop: currPosition+100}, 'slow');
    });
});

Answer 2

一种方法是使用jQuery的ScrollTo并简单地指定偏移量。

jQuery ScrollTo

例如，您可以让它始终滚动到相同的元素，但以100px为增量更改偏移值，等等。

但我想还有比这更好的方法...