Плавная прокрутка страницы вверх на jQuery. Скроллинг к элементу на jQuery

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

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

В этом видео мы разберем такой момент, как создание плавной прокрутки страницы вверх при клике по ссылке.

Очень часто бывает удобно воспользоваться ссылкой "Наверх", когда находишься ближе к нижней части страницы.

Можно реализовать эту возможность исключительно средствами HTML и CSS, однако в данном видео я покажу вам, как можно доработать эту функцию и сделать ее более удобной с помощью библиотеки jQuery.

JavaScript позволит нам обеспечить плавность перемещения от нижней части страницы к верхней, избежав "рывка", который происходит при использовании обычного "якоря".

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

Это очень удобно еще и потому, что привлекает внимание человека к интерактивному элементу на странице и он замечает, что есть возможность воспользоваться такой функцией.

Демонстрацию работы скрипта и подробный разбор кода смотрите в видео ниже.



Краткий обзор урока (все подробности смотрите в видео):

index.html

1. Первое , что нам нужно - это файл, в котором будет размещена сама ссылка "Наверх". Пусть это будет index.html .

Для того, чтобы все работало, в секции head документа нам нужно подключить файл стилей и два JavaScript-файла (о них - чуть позже):

Сначала подключаем библиотеку jQuery, затем - файл script.js с кодом, который мы пишем сами.

Также в этом файле нам нужно разместить саму ссылку, при клике по которой будет происходить плавный подъем к верхней части страницы:

Наверх

script.js

2. Второе - это файл script.js, в котором мы прописываем функции, выполняющие основные действия:

$(document).ready(function(){ $(function (){ $("#back-top").hide(); $(window).scroll(function (){ if ($(this).scrollTop() > 700){ $("#back-top").fadeIn(); } else{ $("#back-top").fadeOut(); } }); $("#back-top a").click(function (){ $("body,html").animate({ scrollTop:0 }, 800); return false; }); }); });

Итак, сначала мы дожидаемся полной загрузки документа и скрываем нашу кнопку "Наверх", чтобы изначально ее не было видно на странице.

Далее мы фиксируем событие прокрутки окна и если прокрутка идет вниз на 700 пикселей и более, то мы плавно отображаем кнопку "Наверх" с помощью метода fadeIn . В противном случае мы ее скрываем методом fadeOut .

Во второй анонимной функции мы отслеживаем событие клика по ссылке внутри блока #back-top и применяем метод animate для плавного подъема к верхней части страницы (scrollTop:0) за 800 мс.

style.css

3. И, третье - это файл стилей. В нашем примере в нем нет ничего лишнего, поэтому стилей мало:

Body { font-size: 13px; line-height: 1.65em; font-family: Verdana, sans-serif; } p { margin-left: 150px; } /* Кнопка наверх */ #back-top{ position:fixed; bottom:10px; left: 0px; } #back-top a{ width:55px; display:block; text-align:center; font:11px/100% Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration:none; background-color: transparent; -webkit-transition:1s; -moz-transition:1s; transition:1s; } /* графическая стрелка */ #back-top span{ width:55px; height:1600px; display:block; margin-bottom:7px; background: url("../img/up-arrow.png") no-repeat bottom center; -webkit-transition:1s; -moz-transition:1s; transition:1s; } #back-top a:hover span{background-color: rgba(0, 0, 0, 0.3);}

Из того, о чем стоит упомянуть, можно назвать значение fixed для свойства position у блока #back-top . Это позволяет нам зафиксировать положение кнопки относительно окна браузера.

Как всё начиналось

HTML код кнопок:

Вверх

Вниз

CSS стили:

#up
{
width:60px;
height:60px;
position:fixed;
bottom:50px;
left:20px;
background-color:#000000;
border-radius:30px;
}
#down
{
width:60px;
height:60px;
position:fixed;
bottom:50px;
left:90px;
background-color:#000000;
border-radius:30px;
}
.pPageScroll
{
color:#FFFFFF;
font:bold 12pt "Comic Sans MS";
text-align:center;
}

В итоге мы имеем два круга с надписями «Вверх» и «Вниз» в левом нижнем углу браузера.

Проблемы начинаются Теперь начинается самое интересное – JavaScript, а точнее jQuery. Как известно, для организации скроллинга выполняются манипуляции над свойствами scrollTop и scrollLeft. В jQuery эти манипуляции осуществляются при помощи методов.scrollTop() и.scrollLeft() соответственно. Нас интересует только.scrollTop.
Первый, самый простой вариант скроллинга выглядел следующим образом:

//Обработка нажатия на кнопку "Вверх"
$("#up").click(function(){
//Необходимо прокрутить в начало страницы
$("body").animate({"scrollTop":0},"slow");
});

//Обработка нажатия на кнопку "Вниз"
$("#down").click(function(){
//Необходимо прокрутить в конец страницы
var height=$("body").height();
$("body").animate({"scrollTop":height},”slow”);
});

Всё, ну очень просто и незатейливо. Но, вот незадача, если в Chrom’е всё было довольно безоблачно и симпатично, в Oper’е тоже довольно сносно (прокрутка вверх осуществлялась мгновенно), то «ВредныйЛис» скролиться отказывался напрочь. Не долго думая, заменив в строчке: $(«body»).animate «body» на «html», я изменил ситуации кардинально: FireFox заработал, Opera перестал рывком прокручивать вверх и стал делать это плавно, но теперь уже Chrome перестал реагировать на манипуляции с кнопками. Из приведённых выше мытарств последовал следующий вариант перевариваемый всеми браузерами: $(«html,body»).animate… Других приемлемых способов осуществлять скроллинг, работающих во всех браузерах найдено не было.

Добавим рюшечек и бантиков С самой простой частью разобрались. Базовый функционал получен, теперь можно придумать, что-нибудь поинтереснее. Первое же, что бросается в глаза, так это скорость скроллинга. При наличии сколь бы то ни было насыщенного контента, использование скроллинга становится настоящим тестом на склонность к эпилепсии. Поэтому, хочется, чтобы скроллинг был более плавным. Решение в лоб, задать определённую константу времени за которое должен осуществляться скроллинг. Очевидный плюс: элементарность решения. Не менее очевидный минус: никак не учитывается объём контента. Разумное решение: вычислять время выполнения скроллинга в зависимости от размера контента. Приступим.
В код обоих кнопок нужно дописать, вычисление текущей позиции. Для этого как раз и используется jQuery() метод.scrollTop().
Здесь, появляются уже известные проблемы: $(«body»).scrollTop() работает только в Chrome, $(«html»).scrollTop() не работает в Chrome. Что, вообще говоря, удивляет, так как получается, что конструкцией $(«body»).animate({«scrollTop»:height},”slow”) в Opera мы можем скролить body, а при получении, свойство scrollTop тега body равно нулю, что, судя из описания element. scrollTop справедливо для элементов, которые скролить нельзя.
Вариант $(«body,html»).scrollTop() по понятным причинам нам не подходит. Ищем альтернативы. Оказывается, текущую позицию можно получить из объектов window и document, так чтобы это устраивало все браузеры. Думаю, следует упомянуть, что использование их для анимации (например вот так: $(document).animate.), ни к чему хорошему не приводит.
Итак, за рабочий вариант выяснения текущей позиции примем: $(document).scrollTop();
Теперь задумаемся над тем, как мы будем вычислять время. Вообще говоря решение тривиальное и известно каждому: время = путь/скорость. Для определения пути, нам как раз и нужна текущая позиция. Также, нужны координаты точки назначения. С кнопкой «Вверх» всё просто, координата точки назначения по вертикальной оси равна нулю, значит, путь равен текущему положению. Для кнопки «Вниз» всё немного сложнее, нам нужно получить «высоту» документа. Уже предвкушаем проблемы, да? Но нет, тут всё оказывается очень просто. Вполне подходящую высоту можно получить используя в качестве селектора «body», «html» или document.
Так. У нас есть путь, теперь нужна скорость. Здесь уже всё зависит лично от вас. Путём визуальных прикидок, мне показалась комфортной скорость 1.73 (цифра не имеет под собой никакого, сколь бы то ни было серьёзного обоснования и прикидывалась на глаз).Итоговый вариант Таким образом, рабочий код выглядит следующим образом:

$(document).ready(function(){
//Обработка нажатия на кнопку "Вверх"
$("#up").click(function(){
//Необходимо прокрутить в начало страницы

var scrollTime=curPos/1.73;
$("body,html").animate({"scrollTop":0},scrollTime);
});

//Обработка нажатия на кнопку "Вниз"
$("#down").click(function(){
//Необходимо прокрутить в конец страницы
var curPos=$(document).scrollTop();
var height=$("body").height();
var scrollTime=(height-curPos)/1.73;
$("body,html").animate({"scrollTop":height},scrollTime);
});
});

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

Резюме В итоге мы получили очень простую реализацию скроллинга страницы, которая работает в любом современном браузере.
Испытания проводились для DOCTYPE: XHTML 1.0 Strict в браузерах Chrome 10, Opera 10, Opera 11, Firefox 4, Internet Explorer 8, Internet Explorer 9. Некоторые проблемы:
  • border-radius как известно в IE8 не работает, но кроссбраузерность вёрстки это не тема данного топика.
  • В Opera 10 инструкция: $(«body,html»).animate({«scrollTop»:0},scrollTime); приводит к моментальному переходу в начало страницы. Эта проблема исчезает с переходом на Opera 11.

UPD: Поправлен итоговый пример.

Давно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются , выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге в страницу не так сложно, как может показаться на первый взгляд. Все что нужно - это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит - единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны , но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.

WOW.jsНеплохой плагин для реализации анимации элементов при скроллинге . Он имеет очень много анимированных вариантов появления блоков и довольно легко настраивается. ScrollMagicЕще один популярный плагин, с помощью которого можно реализовать сложную анимацию, которая будет срабатывать при прокрутке ролика мышки . В данном случае, плагин позволяет делать действительно сложные , эффекты движения, смены фона на страница и вообще деформации фигур. ScrollMagic часто используют на промо-сайтах, где требуется много анимировать.

ScrollmeПростой и легкий плагин с помощью которого можно реализовать эффектную анимацию при прокрутке . Вы можете масштабировать, вращать, двигать, уменьшать или увеличивать прозрачность любого элемента.

SuperscrolloramaSuperscrollorama - мощный, но тяжелый плагин для создания анимации при прокрутке . В его арсенале имеется множество различных настроек для анимации текста, отдельных DIV элементов, включая эффекты.
Более детальную информацию можно найти в документации к данному jQuery плагину.

onScreenОтличный плагин, который мы часто используем в своих проектах. От позволяет легко и быстро сделать различные эффекты появления элементов при прокрутке страницы . Плагин легкий и не грузит страницу.

OnePagejQuery плагин OnePage позволяет разбить страницу на отдельные экраны с высотой 100% и анимировать переход по ним. Требуется лишь легкий толчок, чтобы начался скроллинг к следующему экрану. Такой же эффект использовался на промо-сайте 5s.
Имеются проблемы с , как и практически во всех подобных плагинах. Если текст не помещается по высоте, то он просто обрезается и полоса прокрутки не появляется.

FSVSОчень похожий по функционалу плагин на предыдущий. Позволяет сделать скользящую прокрутку по экранам с помощью css3. Имеет аналогичную проблему при просмотре на телефонах. Переход по экранам в виде отдельных слайдов возможен как с помощью ролика мышки, так и посредством клика на точечную боковую навигацию.

jInvertScrolljInvertScroll позволяет создавать классный горизонтальный parallax скролиинг . В то время, когда Вы крутите ролик мышки вниз, все элементы на странице движутся горизонтально, к тому же с разной скоростью, что создает parallax эффект.

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

ScrollocueОригинальный плагин для специфических задач. Позволяет передвигаться по странице выделяя блоки простым кликом правой клавишей мыши по странице. С каждым новым кликом выделяется элемент ниже, тем самым страница немного прокручивается. Также поддерживается скроллинг стрелками на клавиатуре.

Scrolling Progress BarИнтересное решение, с помощью которого можно показать прогресс прочтения информации на странице. Также есть возможность разбить текст на разделы и все это будет визуально выводиться в любом удобном для вас месте на странице.

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

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

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

Сегодня мы вновь попрактикуемся с jQuery. Мы будем писать скрипт плавного скроллинга при нажатии на кнопку. Сделаем так чтобы при нажатии на кнопку, пользователя плавно переносило на нужный блок. Этот скрипт можно использовать для создания красивого якорного меню.

Вот скрипт, который нам понадобится.

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

Внутри функции в первой строке создается переменная offset со значение 0.

animate – позволяет выполнить пользовательскую анимацию основанную на изменении CSS свойств для выбранных элементов.

scrollTop – получает значение отступа прокрутки сверху для первого элемента в наборе.

Там где стоит 1000, указывается время продолжительности перехода. Изменив это время вы ускоряете, либо замедляете прокрутку.

Как это работает?

Давайте напишем тестовый код, на котором мы попробуем наш скрипт в работе.

Document #block1 { margin: 1200px 0px 100px 0px ; } Заказать звонок! Привет! function slowScroll(id) { var offset = 0; $("html, body").animate({ scrollTop: $(id).offset().top - offset }, 1000); return false; }

Здесь обычный HTML шаблон.

Для того чтобы скрипт работал, вам необходимо подключить библиотеку jquery.

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

Заказать звонок!

В атрибуте href указываем блок к которому нам нужно сделать переход, это прописывается на случай если плавный скролл не сработает, чтобы пользователя все ровно перенесло на выбранный блок. В событии onclick мы указываем название функции и в качестве параметра указываем id блока на который нужно сделать плавный переход.

Представляю огромный список плагинов прокрутки на jQuery для вашего сайта. Различные трюки с прокруткой пришли к нам из-за рубежа не так давно и оцепили ряд современных порталов и сайтов, которые хотели выделиться. Работа над вертикальной прокруткой вполне может повысить конверсию и несомненно впечатление пользователя. Благодаря интересным подходам JS + CSS3 Вы можете улучшить интерфейс своего сайта. Если добавить немного фантазии, то можно из любого плагина получить что-то уникальное для своего сайта. Ведь каждый сайт старается выделиться из серой массы разными способами. Благодаря прокрутке, можно некоторые страницы перенести на страницу, с реализованным плагином, что улучшит получение важной информации пользователем. Данная технология лучше всего подойдет для различных портфолио или же демонстрации какого-либо продукта и т.д.

Переходим непосредственно к делу.

Sly

Sly — это библиотека JavaScript для расширенной однонаправленной прокрутки с поддержкой навигации по элементам. Его можно использовать как простую замену прокрутки, так и инструмент навигации, или как отличный интерфейс навигации и анимации для сайтов параллакса.

jQuery Scroll Path

Это плагин для определения пользовательских путей прокрутки.

windows

AnimateScroll

AnimateScroll — это плагин jQuery, который позволяет вам прокручивать на любую часть страницы, просто вызывая функцию animatescroll () с идентификатором или классом элемента, на который вы хотите перейти.

ScrollMe

По мере прокрутки страницы ScrollMe может масштабировать, поворачивать, переводить и изменять прозрачность элементов на странице. Его легко настроить, и не требуется ни одна строка javascript.

stickUp

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

Block Scroll

Block Scroll — это плагин jQuery, который превращает набор элементов в блоки и отображает их по одному экрану за раз. Идея состоит в том, чтобы разбить вашу страницу на куски для лучшего представления и потока пользователей. Блокировка прокрутки автоматически изменяет вашу страницу.

Starscroll

Создайте div в качестве фона … активируйте плагин; анимация при прокрутке. Плагин автоматически установит div, чтобы он работал невидимым.

Scrolldeck

Scrollocue

Scrollocue — это плагин jQuery для создания простой системы autocue / teleprompter для прокрутки строк текста.

scrollorama

Stellar.js

Stellar.js — это плагин jQuery, который обеспечивает эффекты прокрутки параллакса для любого элемента прокрутки.

Super scroll orama

Parallax

Responsive 3d Fold Scroll

jQuery Scrollify

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

vivus.js

Vivus — это легкий класс JavaScript (без зависимостей), который позволяет вам анимировать SVG, давая им возможность рисования.

jQuery slimScroll

slimScroll — небольшой (4.6KB) плагин jQuery, который преобразует любой div в прокручиваемую область с красивой полосой прокрутки.

jQRangeSlider

jQuery.pin

Вы когда-нибудь хотели прикрепить что-то к стороне текста? Вам когда-нибудь был нужен тонкий липкий элемент, который бы спокойно был закреплен, пока вы прокручиваете вниз?

jQuery.Pin здесь, чтобы помочь! Вставьте любой элемент в верхнюю часть контейнера. Легко отключите его для меньших размеров экрана, где нет места для такого рода махинаций.

Infinite AJAX Scroll

Overscroll

Overscroll — это плагин jQuery и polyfill для стиля прокрутки Safari mobile. Он предназначен для использования в настольных браузерах с последней версией jQuery.

jQuery.localScroll

Parallax ImageScroll – jQuery plugin

JQuery и совместимый с amd плагин для создания эффекта параллакса, как показано на сайте spotify.com.

fullPage.js

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

Parallax.js

Jarallax

Jarallax — это библиотека JavaScript с открытым исходным кодом, которая упрощает настройку css на основе взаимодействия. С Jarallax легко создать веб-сайт с прокруткой параллаксом

jInvertScroll

Jquery fullContent.js

JQuery Full Content позволяет полностью создавать веб-сайты.

jQuery One Page Scroll

Создайте веб-сайт со скроллингом на одной странице (веб-сайт iPhone 5S) с плагином прокрутки одной страницы.

jQuery Parallax Plugin

jQuery Parallax — это сценарий, который имитирует эффект параллакса, как показано на nikebetterworld.com.

jquery.parallax.js

jquery.arbitrary-anchor.js

Portfoliojs

Portfoliojs — это легкий плагин галереи jQuery для ваших красивых изображений с горизонтальной прокруткой, который поддерживает настольные, планшетные и мобильные браузеры.

Scrolling Parallax Plugin

Scrolling Parallax — новый плагин jQuery, который связывает эффект параллакса с полосами прокрутки и колесиком мыши. Это позволяет фоновому изображению или чему-либо еще прокручиваться в разном темпе, чем веб-страница, когда пользователь прокручивает. Эффект параллакса, который является результатом, — это простой способ создать иллюзию глубины на вашем веб-сайте.

Scrolltab

Scrolly

skrollr

Отдельная библиотека прокрутки параллакса для мобильных устройств (Android + iOS) и пк. Нет jQuery. Просто обычный JavaScript (и некоторая магия).

SMINT

Smint — это простой плагин jQuery, который помогает при навигации на веб-сайтах с одной страницей.

jQuery custom content scroller

Детально настраиваемый пользовательский плагин jQuery для прокрутки. Особенности включают в себя вертикальную и / или горизонтальную полосу прокрутки, настраиваемый импульс прокрутки, колесо мыши (через плагин jQuery mousewheel), поддержку клавиатуры и сенсорного экрана, готовые к использованию темы и настройку с помощью CSS, поддержку направления RTL, параметры опций для полного управление функциями прокрутки, методы запуска таких действий, как прокрутка, обновление, уничтожение и т. д.

ScrollUpBar Plugin

Плагин прокрутки вверх (jQuery) скрывает верхнюю панель при прокрутке вниз и показывает ее при прокрутке вверх. Это особенно полезно на мобильных интерфейсах, чтобы сэкономить драгоценное пространство.

StickyTableHeaders

jQuery panelSnap

isInViewport.js

Waterfall

Плагин jquery waterfall , такой как Pinterest, huaban.com, faxianla.com

Scroller

jQuery.SerialScroll

jScroll

jScroll — это плагин jQuery для бесконечной прокрутки, написанный Филиппом Клаузинским. Бесконечная прокрутка; также известная как ленивая загрузка, бесконечная прокрутка, автопир, бесконечные страницы и т. д.

FoldScroll

scrollUp jQuery plugin

ScrollUp — это легкий плагин jQuery для создания настраиваемой функции «Прокрутка вверх», которая будет работать с любым веб-сайтом с легкостью.

multiScroll.js

Создавайте разделенные страницы с двумя вертикальными панелями прокрутки. Совместимость с мобильными телефонами и устройствами и старыми баузерами, такими как IE 8.

Any List Scroller

qpScroll

qpScroll — это плагин jQuery, который создает фон параллакса для любой страницы или div. Его очень легко настроить. Он может быть добавлен на любую существующую страницу без необходимости изменения маркировки HTML.

jQuery Stick ’em

Parallax.js

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

Slinky.js

Slinky.js — это плагин jQuery для создания красивых списков навигации для прокрутки с заголовками штабелирования.

Infinity.js

Infinity.js — это UITableView для Интернета: он ускоряет прокрутку по длинным спискам и сохраняет ваши бесконечные каналы бесперебойными и стабильными для ваших пользователей. Он небольшой, проверенный временем и высокоэффективный.

Arbitrary Anchor

Waypoints

Waypoints — это библиотека, которая упрощает выполнение функции всякий раз, когда вы переходите к элементу.

jQuery.kinetic

Scrolling Progress Bar

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

jQuery Smooth Div Scroll

Smooth Div Scroll — это плагин jQuery, который прокручивает содержимое по горизонтали влево или вправо.

jQuery Story Tale

Простой плагин jQuery, расширяющий плагин animateScroll с возможностями одиночной страницы.

jQuery Animation Scroll Plugin

jQuery.ScrollTo

Endless Scroll jQuery Plugin

Бесконечная прокрутка (или infinite scrolling) является популярным методом среди веб-сайтов 2.0, таких как Google Reader и Live Image Search, где вместо подкачки через элементы, используя традиционную технику разбиения на страницы, страница просто продолжает загружать новые элементы, прикрепленные к концу.