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>也是一个常见元素。此外，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的增量更改偏移值，等等。

但我认为有比这更好的方法......

jQuery Scroller问题

2 个答案: