|
7 ‘Scroll to Top’ решений на jQuery
‘Scroll to Top’ кнопка - дополнение для страниц с большим количеством контента и блогов с длинными сообщениями.
Необходимость использования якорей на сайте возникает очень часто. В основном, их используют в больших веб-документах, которые имеют содержание в виде ссылок. По клику на такой ссылке происходит мгновенный переход к нужному разделу страницы. В этой статье я хочу показать как с помощью небольшого скрипта сделать этот переход плавным. То есть вместо мгновенного перехода, страница будет плавно прокручиваться к нужному месту. И не важно где будет находиться якорь: выше ссылки или ниже.
В этом топе Вы найдете множество jQuery решений, также как и решений одним кликом, которые позволяют Вашим посетителям гладко прокручивать право на начало страницы, делая Ваш веб-сайт более удобный для пользователя.
Сначала определимся с тем, что такое якоря (вдруг кто-то не знает). Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке.
Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега или же просто присвоить какому-либо тегу атрибут id с желаемым значением (этот способ используется чаще, поэтому скрипт будет ориентирован именно на него). И в первом, и во втором случае, имя якоря должно быть уникальным в пределах страницы.
<a name="razdel1"></a> <div id="#razdel1"> ... </div>
В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.
<a href="#razdel1">К разделу 1</a>
Вернемся к плавным переходам. Итак, скрипт должен срабатывать по клику на ссылках, у которых атрибут href начинается с решетки "#". В jQuery это можно сделать так:
$('a[href^="#"]').click(function(){
//...
});
Затем нужно сохранить значение атрибута href в переменной:
var target = $(this).attr('href');
Для изменения значения отступа прокрутки сверху будем использовать метод scrollTop. Плавность же будет реализована функцией animate. Вот такой окончательный вид имеет наш скрипт для плавной прокрутки:
$(function(){
$('a[href^="#"]').click(function(){
var target = $(this).attr('href');
$('html, body').animate({scrollTop: $(target).offset().top}, 300);
return false;
});
});
offset().top определяет значение отступа сверху для якоря (с id равному значению атрибута href), которое устанавливается в scrollTop. В конце не забываем поставить return false, чтобы отменить действие по умолчанию. Теперь необходимо только вставить этот код на нужные вам страницы (или подключить отдельным файлом) и всё заработает. Удачи!
Дополнительные решения для плавной прокрутки к ссылке...
1. jQuery topLink Plugin
topLink jQuery plugin разработанный David Walsh, показывает всплывающую кнопку “вверх страницы” когда пользователь переместился вниз сайта.
2. Исчезающий “Scroll to top” link with jQuery and CSS
С подробным описанием как создать скрол “вверх страницы” основанный на CSS and jQuery.
3. Исчезающий “Scroll to top” link with jQuery and CSS
Простая кнопка “вверх страницы” в правом ниженм углу сайта. Код использует разработки первых двух скролов и более оптимизированный, чем предыдущие два решения, но с эффектом затухания и плавной прокруткой.
4. jQuery Plugin: Scroll to Top
Легкий в установке, jQuery скрипт, который добавляет исчезающую прокрутку к странице сайта с анимированной прокруткой, с нормальной
5. UItoTop jQuery Plugin
Вдохновленный прекрасной идеей относительно jQuery Дэвида Уолша topLink Плагин, Мэтт Вэроун сделал подобный плагин, но с двумя основными отличиями, этот не требует для работы , чтобы Вы добавили дополнительную разметку html или дополнительные плагины. Это решение будет работать, только когда у пользователя JavaScript включен. 
Данный скрипт использует
6. jQuery Scroll to Top Control v1.1
Этот сценарий выводит на экран стационарное управление в правом нижнем углу страницы сайта, которое когда нажать мягко прокручивает страницу назад до верха. Вместо того, чтобы всегда быть видимым на экране пользователя, сценарий позволяет Вам определять, как далеко ниже (в пикселях) на странице пользователя показать управление.
7. Плавный GoToTop WordPress plugin
Плавный скрипт прокрутки, разработанный Ариэлем Флеслером и Могосану Богдан как плагин для WordPress. На странице настроек плагина Вы можете настроить css, исчезающую скорость и минимальную высоту в пикселях.
Created/Updated: 25.05.2018