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 中的当前链接是：返回顶部

，滚动到锚点：

我想有人会立即明白我的意思，但问我是否需要更多详细信息，我可以提供一个我正在尝试的示例来实现。如有帮助，将不胜感激。

Answer 1

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

例如，如果您的向下滚动按钮的 id 为 scrollDownButton，并且您希望将页面向下滚动 100px，则以下代码将执行此操作。

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

scrollTop() 将为您提供垂直滚动条的当前位置，scrollTop(value) 会将其设置为给定位置。

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

注意：您想要选择具有滚动条的元素。在上面的示例中，它是 ，但 也是一个常见元素。另外，scrollTop() 已在 JQuery 1.2.6 中实现，请确保您的版本足够新。

更新：如何为滚动设置动画。

如果您想要为滚动设置动画并看到它发生，而不仅仅是向下或向上跳，您可以使用以下代码：

$('#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 为增量的偏移值等。

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