Как сделать плавный скроллинг в начало страницы (Scroll To Top) на основе jQuery
Сделаем сначала кнопку Наверх
Стилизуем кнопку на свое усмотрение
.scrollToTop{ width:100px; height:130px; padding:10px; text-align:center; background: whiteSmoke; font-weight: bold; color: #444; text-decoration: none; position:fixed; top:75px; right:40px; display:none; background: url('arrow_up.png') no-repeat 0px 20px; } .scrollToTop:hover{ text-decoration:none; }
важно отметить, что кнопка будет фиксированная, поэтому используем свойство position:fixed; и с ними top:75px; right:40px;
в JS код будет таким:
$(document).ready(function(){ //Показываем кнопку скролла через 100 пикселей (или не показываем) $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.scrollToTop').fadeIn(); } else { $('.scrollToTop').fadeOut(); } }); //Анимированный скролл в начало страницы при нажатии $('.scrollToTop').click(function(){ $('html, body').animate({scrollTop : 0},800); return false; }); });