jQuery smooth scroll snippet работает с разной скоростью

Ive получил этот довольно популярный код:

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>

но на одной странице сайта, когда divs находятся на разной высоте, т. е. прокрутка должна идти на разных длинах - прокрутка иногда намного быстрее, а иногда очень медленно. Какой код заставит te scroll всегда быть время = скорость * расстояние, а не time = lentgh в ms или другими словами, как я могу достичь всегда одна и та же скорость?

1 ответов


ссылка ваш срок до пикселов, вы должны двигаться.

длительность в вашем коде заблокирована на 500. Если я получу количество пикселей, которые нужно переместить в любом направлении и умножить его на несколько миллисекунд, вы можете получить заданную скорость прокрутки страницы.

заменить:

$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);

С этого:

$('html,body').animate({scrollTop:$(this.hash).offset().top}, 
    Math.abs(window.scrollY - $(this.hash).offset().top) * 10);

редактировать 10 выше, чтобы увеличить или уменьшить продолжительность.