БЕСПЛАТНЫЕ УРОКИ. Создание сайтов

jQuery. Как поставить кнопку возврата к началу страницы

Если у Вас получается слишком большие страницы на сайте, то возврат к началу требует прокрутки роликом или протягивания вверх полосы прокрутки мышей. Это не всегда удобно.

В этом уроке мы рассмотрим простое решение этой проблемы при помощи всплывающей стрелки работающей с помощью jQuery, при клике по которой страница плавно возвращается к началу.

demo        skachat

Для добавления этого скрипта понадобятся два скрипта на языке JavaScript и картинка, которая будет появляться в нижнем правом углу страницы при перемещении курсора вниз Web-страницы.

  1. Скачайте архив и распакуйте его в корневую папку своего сайта (кнопка  "Скачать"  выше).
  2. В своей странице, в разделе HEAD добавьте две строки для подключения скриптов:

    <script type="text/javascript" src="/js/scriptjava.js"></script>
    <script type="text/javascript" src="/js/script.js"></script>

  3. Скрипты и картинка (рисунок стрелки) должны быть в папке JS, иначе нужно будет отредактировать URL подключения скриптов и картинки.
  4. При желании, картинку со стрелкой можно заменить, но при этом потребуется корректировка размеров рисунка и имени картинки в 10-й строке скрипта script.js. См. рисунок ниже:

 script

Добавить комментарий
  • Гость - Вадим

    Добрый день!
    Спасибо. Все работает. Есть только 2 вопроса.
    1. Если нужна только одна кнопка вниз (до конца страницы), что нужно удалить в script.js?
    2. Что отвечает за начало появления этой кнопки. По умолчанию вроде многовато - где-то 2 экрана?

 
Our website is protected by DMC Firewall!