Добро пожаловать на Вопросы и Ответы YouOn , где вы можете задать вопросы и получить ответы от других пользователей сервиса.

Плавный скролл страницы на JavaScript

0 голосов
Друзья, мне понадобился плавный скролл страницы на JavaScript и я не могу никак найти как же мне это реализовать. Я хочу чтобы когда скроллишь колёсиком страницу был эффект плавности. Пожалуйста помогите мне решить этот вопрос.
Спросили Aug 11, 2015 в категории Интернет

1 Ответ

0 голосов

Если у вас стоит jQuery версии 1.6-1.7, то вот код:

$(document).bind( 'mousewheel', function (e) { 
var nt = $(document.body).scrollTop()-(e.originalEvent.wheelDeltaY); 
e.preventDefault(); 
 
$(document.body).stop().animate( { 
scrollTop : nt 
} , 500 ); 
} )
 
Если у вас стоит jQuery версии 2.X, то вот код:
 
$(document).bind( 'mousewheel', function (e) { 
    var nt = $(document.body).scrollTop()-(e.deltaY*e.deltaFactor*100); 
    e.preventDefault(); 
    e.stopPropagation(); 
    $(document.body).stop().animate( { 
         scrollTop : nt 
     } , 500 , 'easeInOutCubic' );  
} )
 
Если хотите реализовать плавный скролл к элементу, то вот код на jQuery:
$(document).ready(function() {
    $('.click-menu-element').click(function(){
        $(this).addClass('active');
       $('html, body').animate({scrollTop:$('#elementId').position().top - 60}, 2000);
    });
});
Пример посмотрите здесь.
Кстати вот ещё интересная штука завязанная на скролле.
Некоторые используют библиотеку Scrollr

 

Ответ Aug 11, 2015
...