Как сделать плавный скроллинг в начало страницы (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;
});
});