Кнопка "Наверх" с прокруткой


Скрипт добавляет кнопку "наверх" после того, как пользователь отскроллит страницу на 300px вниз. 

При нажатии плавная прокрутка.

Так же поднимает кнопку при достижении футера

$(function(){
	$("body").append('<div id="gototop"><span class="alt">Наверх</span></div>');
	$("#gototop").mousemove(function(){
		$("#gototop .alt").delay(1000).fadeIn(100);
	}).mouseleave(function(){
		$("#gototop .alt").stop(true, true).fadeOut(100);
	}).click(function(){
		$("html, body").animate({scrollTop:0}, 'slow');
	});
	
	$(document).scroll(function(){
		var scroll = $(document).scrollTop();
		var docHeight = $(document).height();
		var winHeight = $(window).height()
		delta = (docHeight - scroll - winHeight);
		if(scroll > 300) {
			if(delta < 60) 
				$("#gototop").stop(true, true).animate({"bottom" : "70px"}, 200);
			else 
				$("#gototop").stop(true, true).animate({"bottom" : "15px"}, 200);
			$("#gototop").show();
		}
		else $("#gototop").hide();
	});
});
Стили для кнопки
#gototop {
	display: none;
	position: fixed;
	right: 15px;
	bottom: 15px;
	width: 45px;
	height: 45px;
	background: url(/demo/gototop.png) no-repeat;
	z-index:2;
	cursor: pointer;
}

#gototop .alt {
	display: none;
	border: 1px solid #bababa;
	background: #fff;
	color: #002e4f;
	font-size: 12px;
	font-weight: bold;
	position: absolute;
	top: -10px;
	right: 45px;
	padding: 2px 5px;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
}

Метки: наверх scroll

Комментарии

Новое на сайте


Популярное


Обсуждаемое