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

 
Для начала нам необходимо создать HTML-документ и подключить скрипт jQuery из библиотеки Google:

Анимированная прокрутка страницы на jQuery

Теперь стилизируем нашу кнопку с помощью CSS:

Анимированная прокрутка страницы на jQuery

Используем элемент #back-top свойство position:fixed, чтобы его позиция была зафиксирована на странице. Тег span не обязателен.

Теперь рассмотрим сам код jQuery:

Выше представлен код JavaScript (вы можете вставить его куда угодно на странице). Он скрывает элемент #back-top (в моем примере это). Затем проверяет значение позиции верхней полосы прокрутки (scrollTop), и если оно больше, чем 100, отображает элемент #back-top, в противном случае, прячет его. Следует обратить внимание, что кнопка перехода на верх ссылается на якорь #top, который является идентификатором тега body.
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.