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

19 ноября 2014 Антон Кулешов 1202 0

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

Реклама

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

И так, давайте приступим, начнём с подключения 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 не прописывался в адресной строчке).

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Как расшарить 3G модем по сети

23 июля 2014 ti1schweiger

Широкополосный интернет давно не редкость, но до сих пор существуют места куда он не добрался, а мобильная связь существует. За последнее время мобильные операторы солидно повысили стабильность и скорость работы 3G интернета, потому данная статья будет посвящена тому, как интернет с «триджика» раздать всем пользователям сети.

Анимированный прогресс бар в 4 строки кода

11 декабря 2014 Антон Кулешов

Наличие на сайте прогресс бара действительно будет полезным, когда пользователю требуется сообщить о том, что на странице происходит что - то при долгом выполнении скрипта. Из этой статьи вы узнаете, как установить к себе на сайт progressbar, затратив на это всего пару минут времени.

jQuery end Page Box для всплывающих сообщений

4 февраля 2016 Антон Кулешов

В процессе прокрутки пользователем страницы, часто бывает нужно что-нибудь подсказать ему или показать – для этого существуют всплывающие сообщения при прокрутке. Сейчас на многих ресурсах используются этот вариант, к примеру: для добавления формы обратного звонка, кнопок социальных сетей, просто заметки (а-ля на полях книги), форм подписок, которые появляются при прокрутке страницы, или просто блока рекламы.