Scroll to Top jquery

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

Leave a comment

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.