Главная » Статьи » Скрипты и все к ним |
Простая реализация на jQuery анимированной прокрутки вверх страницы. Код проверяет положение скроллбара, если значение выше заданного, то кнопка прокрутки скрывается, иначе появляется кнопка, при нажатии на которую происходит прокрутка страницы в самый верх. Разметка HTMLОбъявим элемент #back-top с position:fixed, он будет зафиксирован на странице. SPAN тег необязателен. Но мы добавили span тег для отображения стрелки графически (ввиде картинки). Также был добавлен переход в 1 секунду, чтобы создать эффект затухания при наведении мыши.
CSS
javascriptПодключаем сначала jQuery:
Ниже приведен javascript код, который можно вставить в любое место на странице. На начальном этапе он осуществляет скрытие элемента#back-top (в демо это тег <p id="back-top">). Далее скрипт сравнивает положение скроллбара окна (scrollTop) со значением 100, если больше 100, то кнопка исчезает, иначе появляется. Далее функция по клику, если сделан клик по ссылке #back-top, то произойдет анимированная прокрутка body scrollTop вверх к 0.
Обратите внимание, что кнопка Вверх имеет ссылку с якорем #top, которая является ID тега body. В принципе для jQuery такого не нужно, но если у пользователя не поддерживается javascript, то это своеобразный резерв - прокрутка произойдет и в этом случае, но только без анимации. | |
Категория: Скрипты и все к ним | Добавил: viting20125083 (17.12.2014) W | |
Просмотров: 974 |