Скрипт всплывающей кнопки "Наверх"

Здравствуйте! Пример скрипта можно посмотреть в этом блоге, когда вы прокручиваете страницу вниз, скрипт для сайта - кнопка наверхв правом нижнем углу появляется картинка-кнопка "Наверх", нажав на которую вы попадете к верхней шапке сайта.

Под каждым примером с картинкой вы найдете код (скрипт), который надо вставить перед закрывающимся тегом "</body>"


Три небольших момента для корректной установки:

  1. Кодировка сайта должна быть в UTF-8, если будет другая то вместо русских букв - будут непонятные крякозяблики
  2. Надо чтобы на сайте была подключена библиотека jquery. Подключить ее можно вставив в шаблоне сайта перед"</head>" следующий код:
    
    
  3. Если у вас на сайте в дизайне прописан z-index (признак - не видно картинку {или видно, но только на некоторых участках сайта}), вам надо прописать в стилях к сайту следующую строчку:
    #topcontrol{z-index: 9999;}
    
  4. Если нужно изменть положение картинки то воспользуйтесь стилем margin:
    #topcontrol{margin-bottom: 50px;}
    



1.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/1.js"></script>

2.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/2.js"></script>

3.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/3.js"></script>

4.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/4.js"></script>

5.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/5.js"></script>

6.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/6.js"></script>

7.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/7.js"></script>

8.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/8.js"></script>

9.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/9.js"></script>

10.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/10.js"></script>

11.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/11.js"></script>

12.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/12.js"></script>

13.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/13.js"></script>

14.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/14.js"></script>

15.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/.js"></script>

16.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/16.js"></script>

17.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/17.js"></script>

18.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/18.js"></script>

19.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/19.js"></script>

20.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/20.js"></script>

21.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/21.js"></script>

22.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/22.js"></script>

23.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/23.js"></script>

24.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/24.js"></script>

25.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/25.js"></script>

26.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/26.js"></script>

27.

	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/27.js"></script>

Простая кнопка "Наверх" без JavaScript

Существует очень простой способ предоставить пользователю такой функционал. Этот способ не требует задействования каких либо библиотек или дополнительных скриптов и делается исключительно при помощи HTML и при желании с задействованием CSS, путем создания обыкновенной внутренней ссылки.

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

    ^Наверх

Как вы видите ссылке задан класс .topbutton используя который, при помощи CSS, вы можете придать ссылке любой, необходимый вам вид, например вид той же кнопки.

В стили вашего сайта, обычно они находятся в файле style.css надо вставить:

    .topbutton {
        width:100px;
        border:2px solid #ccc;
        background:#f7f7f7;
        text-align:center;
        padding:10px;
        position:fixed;
        bottom:50px;
        right:50px;
        cursor:pointer;
        color:#333;
        font-family:verdana;
        font-size:12px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
    }

Недостатки:

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

- Прокрутка не будет плавной и после нажатия пользователь будет мгновенно перенаправлен вверх страницы.

Плюсы данного вида кнопки:

+ Для работы кнопки не нужно задействовать скрипты и большие, по объему, библиотеки. И это очень большой плюс.


Кнопки прокрутки вверх и вниз на JQUERY

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

  • Название: Кнопки прокрутки вверх и вниз на JQUERY
  • Ссылка: scroll.zip 57.72 KB
  • Формат: ZIP архив

В скачанном архиве будут находится все файлы необходимые для функционирования кнопки. Это CSS, JS файлы и файлики изображений стрелок.


Кнопка плавной прокрутки вверх при помощи JQuery

Еще один вариант организации плавной прокрутки содержимого страницы, с низу вверх, при помощи JQuery. Кнопка находится в правой нижней части страницы и появляется только если немного проскролить страницу вниз. Все реализовано при помощи небольшого кусочка CSS и JS кода, а так же небольшой картинки использующейся в качестве кнопки.

Мне эта кнопка нравится тем, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты.

Теперь разберемся, что нужно сделать для подключения кнопки к сайту

Изображение:

Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это:

Скачать стрелку .png

HTML код:

Для вызова кнопки после основного контента страницы или перед тегом разместите следующий HTML код:

CSS стили:

.scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url('icon_top.png') no-repeat;
}

При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и 50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.

JQuery:

Для начала подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами <head>...</head>? вставляем следующее:

Затем сразу после подключения библиотеки необходимо расположить следующий код JQuery:


Первый ScrollTop - определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение.

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