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

19 ноября 2014 Антон Кулешов 1203 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
Читайте далее

22 эффекта для кнопок

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

Тенденция делать всё максимально динамичным и ярким - это реалии сегодняшних дней. Каждый элемент дизайна сайта вскоре не будет оставлен без внимания. Сегодня мы поговорим об невероятно интересном и красивом наборе эффектов для кнопок. Думаю мало кто задумывается об эффектах при нажатии, но если создаёшь, к примеру, продающую страницу, то на решение потенциального покупателя может повлиять как размер кнопки, так и цвет, и даже сам эффект при клике.

Слайдер карусель

7 октября 2015 Антон Кулешов

Желание выделиться и огромная конкуренция вынуждает веб-мастеров делать сайты интересными и запоминающимися. Трудно представить, сколько времени, зачастую, тратится на то, чтобы придать странице особый шарм. И сегодня я хочу рассказать про jQuery плагин Cloud 9 Carousel – это скрипт, которой позволяет сделать 3D слайдер карусель.

Прогон по каталогам – мифы и реальность

12 июня 2015 ti1schweiger

Добавить сайт в Яндекс Каталог – цель любого веб-мастера. Для молодого начинающего блогера – это признание его заслуг, для матерого продвиженца – рутинная часть работы, потому как, серьёзно продвигаемый проект просто обязан попасть в Яндекс Каталог, если вы вбухали солидную сумму в SEO, то подобную опцию можно потребовать как подтверждение проделанной работы. Что же нам дает попадание нашего сайта в Яндекс Каталог и стоит ли игра свеч? Давайте разберемся.