jQuery smooth scroll snippet以不同的速度工作

前端之家收集整理的这篇文章主要介绍了jQuery smooth scroll snippet以不同的速度工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个相当流行的代码
jQuery(document).ready(function($) {
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top},500);
    });
});

并在HTML中:

<a href="#scrollThere">Click</a>

去吧

<div class="scroll" id="scrollThere"></div>

但是在一个页面网站上,当div处于不同的高度时,即滚动必须采用不同的长度 – 滚动有时要快得多,有时甚至很慢.什么样的代码会使te滚动始终是时间=速度*距离,而不是时间=以毫秒为单位或者换句话说,我怎样才能达到始终相同的速度?

解决方法

将您的持续时间与您必须移动的像素相关联.

代码中的持续时间锁定为500.如果我获得必须在任一方向上移动的像素数量并将其乘以几毫秒,您就可以获得页面滚动的设定速度.

替换这个:

$('html,500);

有了这个:

$('html,Math.abs(window.scrollY - $(this.hash).offset().top) * 10);

编辑上面的10以增加或减少持续时间.

猜你在找的jQuery相关文章