Кнопка «Наверх»

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

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

  1. Скачайте архив со скриптом и изображением здесь.
  2. В папке два файла: само изображение arrows.png и файл скрипта sript_top.js. Поместите эти два файла в корень сайта (или рядом с той страницей, на которой хотите стрелку).
  3. Так как скрипт sript_top.js использует библиотеку jQuery, то Ваш компьютер должен быть подключен к Интернету (если Вы еще не разместили свой сайт на хостинге).

    На изображении arrows.png находятся две стрелки, которые скрипт использует в двух состояниях: в одном - без наведения мыши (более светлое), во втором - при наведении мыши (более яркое).

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

  4. Нижеприведенный скрипт поместите в head.

    <!--Кнопка НАВЕРХ-->

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

    <!--Конец кнопки НАВЕРХ-->

  5. В таблице стилей пропишите стили для кнопки.

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

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

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

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