Показать Меню
falbar Кнопка прокрутки «Наверх»

Плавная кнопка прокрутки «Наверх»

Кнопка прокрутки «Наверх»

В этой статье я хочу уделить внимание такому вопросу: как сделать кнопку прокрутки «Наверх»? После прочтения Вы получите готовый скрипт, который без труда установите себе на сайт.

Наверняка, на многих сайтах Вы видели данный функционал. Когда страницы длинные, и пользователю приходится долгое время скролить обратно в начало, то присутствие кнопки прокрутки "Наверх" явный признак заботы о нём. Стоит сказать, что до сих пор встречаются сайты, которые не используют данное решение, хотя поставить себе скрипт занимает пару минут.

И так, давайте приступим, начнём с подключения jQuery библиотеки:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Теперь нам необходимо задать правила стилей для кнопки, чтобы поместить её в правый нижний угол и скрыть. Правила, к слову, могут быть любыми, в зависимости от дизайна сайта, но не стоит забывать, что кнопка изначально не должна отображаться.

#totop{
	display: none;
	background: url(totop.png) no-repeat center center;
	height: 52px;
	width: 52px;
	overflow: hidden;
	position: fixed;
	right: 10px;
	bottom: 10px;
	opacity: 0.7;
}
	#totop:hover{
		opacity: 1;
	}

Пишем jQuery функцию, которая будет принимать два параметра: элемент и скорость прокрутки.

function scrollToTop(element, speed){

	$(window).scroll(function(){
		if($(this).scrollTop() > 300){
			element.fadeIn(600);
		}else{
			element.fadeOut(600);
		};
	});

	element.click(function(){

		var elementClick = $(this).attr("href"),
			destination = $(elementClick).offset().top;

		$("html:not(:animated),body:not(:animated)")
			.animate({
				scrollTop: destination
			}, speed);

		return false;
	});

	return false;
};

После загрузки страницы вызываем её:

$(function(){
	scrollToTop($("#totop"), 1000);
});

Как видите весь код, я поместил в функцию, это сделано, чтобы избежать случаев, когда работая с ajax необходимо вызывать заново скрипт.

Сам же написанный код делиться на две части:

  1. Отображение и скрывание кнопки при прокрутке страницы;
  2. Обработка клика по кнопке (обрабатывая событие клика, стоит возвращать false, чтобы путь #id не прописывался в адресной строчке).

Вот и всё, кнопка «Навер» готова. Вам останется только скачать скрипт и подключить к сайту.

Спасибо за внимание.

Подписаться на обновления

Комментариев еще не оставлено