Question

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

今天我使用这个JQuery方法向下滚动点击一个链接

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

但是这个动作需要2秒才能滚动到锚点，无论它在页面的哪个位置。有没有办法执行此操作，但选择的速度而不是选定的时间？

谢谢，流量

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/

以恒定速度向下滚动网页

1 个答案: