jquery - 以恒定速度向下滚动网页

Question

我想创建一个导航栏，其中包含指向我网站不同部分的链接。该网站必须是一个页面，不同的部分在彼此下面，例如 Bootstrap http://getbootstrap.com/getting-started/

今天我使用这个 JQuery 方法在单击链接时向下滚动

function scrollTo(hash) {
        $(document.body).animate({
            'scrollTop':   $('#' + hash).offset().top
    }, 2000);
}

但是这个 Action 需要我 2 秒才能滚动到 anchor ，无论它在页面中的什么位置。有没有办法以选定的速度而不是选定的时间来执行此操作？

谢谢，流量

Answer 1

这样的事情怎么样？您可以定义每秒移动的像素数量，它会相应地调整动画持续时间:

var pixels_per_second = 200;
function scrollTo(hash) {
    distance = Math.abs($(document.body).scrollTop( ) - $('#' + hash).offset( ).top);
    console.log(distance);
    scroll_duration = (distance / pixels_per_second) * 1000;
    console.log(scroll_duration);
    $(document.body).animate({ 'scrollTop':   $('#' + hash).offset().top }, scroll_duration);
}

jsFiddle:http://jsfiddle.net/qNBC6/