Html кнопка вверх страницы. Плавная кнопка "Наверх" на jQuery

Был рассмотрен способ плавного перемещения (скроллинга) по ссылкам на странице сайта. Частный вариант такого скроллинга - кнопка возврата в начало страницы .

Обычно кнопку возврата в начало страницы размещают в правом нижнем углу экрана и делают фиксированной, чтобы в любой момент можно было вернуться назад. Для этого достаточно задать положение кнопки следующими правилами CSS:
position:fixed; /*Расположение кнопки на странице: внизу справа с отступами 10рх*/
top:auto;
bottom:10px;
left:auto;
right:10px;

Для особо ленивых товарищей удобно вместо картинки кнопки использовать символы Юникода, оформив их с помощью правил CSS. О том, как выбрать подходящий символ-значок, рассказано в статье "Символы Юникода - полезные значки для сайта ". Например, используя значок с кодом ⇑ , можно получить следующую кнопку:

Оформление кнопки сделано с помощью следующих правил CSS:
border-radius:5px;
background-color:#ddd;
padding:8px 20px;
font-size:24px;
color:#333;
text-align:center;

Описанный способ имеет один недостаток: кнопка возврата наверх выводится постоянно. Чтобы она появлялась только при движении вниз по странице, можно использовать немного измененный скрипт - плагин jQuery liScrollToTop .

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

Как обычно, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, конечно же, scrolltotop . Затем скачиваем архив и распаковываем его в созданную папку. Мы получим в ней два скрипта jquery-1.8.3.min.js, jquery.liScrollToTop.js и таблицу стилей liScrollToTop.css .

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




$(function(){
$(".scrollUp").liScrollToTop();
});

Картинку кнопки возврата размещаем в любом месте страницы (удобнее в конце) в теге DIV: