Скрипт «Наверх»

Скрипт кнопки «Наверх» с плавным прокручиванием

Здесь я привожу пример, как поставить кнопку «Наверх» в виде стрелки. Кнопку Вы можете наблюдать на любой из страниц этого сайта, которая длинней экрана. 

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

  1. Скрипт использует три файла: само изображение arrows.png, файл скрипта sript_top.js и файл библиотеки jQuery.js. В данном примере все файлы расположены в одной папке.
  2. На изображении arrows.png находятся две стрелки, которые скрипт использует в двух состояниях: в одном - без наведения мыши (более светлое), во втором - при наведении мыши (более яркое).

    Изображение arrows.png для стрелки «Наверх»

  3. Нижеприведенный код размещается в head.

    <!--Стрелка НАВЕРХ-->

    <LINK id=defaultCSS rel=stylesheet type=text/css>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script src="script_top.js" type="text/javascript"></script>
    <a title="Наверх" class='scrollTop' href='#header' style='display:none;'></a>

    <!--Конец стрелки НАВЕРХ-->

  4. В таблице стилей пишется стиль для изображения стрелки.

    /*---Стили для кнопки НАВЕРХ----*/

    .scrollTop {
    background:url(arrows.png) 0 0 no-repeat;
    display:block;
    width:50px;
    height:50px;
    position:fixed;
    bottom:20%;
    right:50%;
    z-index:2000;
    }
    .scrollTop:hover {
    background-position:0 -58px;
    }

    /*---Конец стилей для кнопки НАВЕРХ----*/

  5. Изменяя параметр расстояния от нижнего края экрана bottom:20%; и от правого края экрана right:50%; можно расположить стрелку в любой части Вашего сайта.

Скачать этот пример скрипта стрелки «Наверх» можно здесь (38 Кб).