Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Плавная прокрутка страницы на jQuery

Просматривать ваш сайт будет намного приятней, если организовать плавную прокрутку страниц. Само собой, подразумевается именно вертикальная прокрутка, т.к. сайты с горизонтальной прокруткой считаются моветоном.

Плавная прокрутка страницы на jQuery
Содержание статьи

Установка jQuery.scrollSpeed

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

Скрипт плавной прокрутки позволяет привести все это к общему знаменателю. Все что нам нужно сделать, это подключить скрипт jQuery.scrollSpeed, разумеется, предварительно подключив саму библиотеку jQuery (разработчики плагина требуют брать версию посвежее, иначе будет возникать ошибка $(window).on is not a function). Мы взяли jquery-1.11.3.min.js и с ней скрипт прекрасно работает.

  

Ну и собственно вызвать подключенный скрипт при готовности DOM-а.

$(function() {  
	// Default
	jQuery.scrollSpeed(100, 800);

	// Custom Easing
	jQuery.scrollSpeed(100, 800, 'easeOutCubic');
});

Демонстрация плавной прокрутки страницы:

открыть в новой вкладке

Поддержка в браузерах

  • Google Chrome
  • Safari
  • Internet Explorer
  • Firefox
  • Opera

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







Читайте также:
Полная очистка директории с помощью рекурсивной PHP-функции

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»