Как сделать кнопку Наверх на сайте

Для чего нужна кнопка Наверх

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

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

Если на сайте есть кнопка Наверх, когда посетитель дочитает страницу до конца, то все что от него требуется, это кликнуть по данной кнопке и страница плавно прокрутится до самого верха.

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

Кнопка Наверх с использованием скрипта

Для реализации этой идеи, сначала надо подключить JavaScript библиотеку JQuery. Есть возможность это сделать с сервера Google, для чего достаточно прописать в область head сайта в файл header код следующего содержания:

<script src=»//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js»></script>.

Пусть нам нужно получить плавающий блок в правом нижнем углу с надписью Наверх.

Для этого надо перед закрывающим тегом </head> вставить следующий код скрипта:

<script type=»text/javascript»>

$(document).ready(function() {

$(‘body’).append(‘<div id=»toTop»>^ Наверх</div>’);

$(window).scroll(function() {

if($(this).scrollTop() > 200) {

$(‘#toTop’).fadeIn();

} else {

$(‘#toTop’).fadeOut();

}

});

$(‘#toTop’).click(function() {

$(‘body, html’).animate({scrollTop: 0}, 500);

});

});

</script>

Далее необходимо добавить новые стили в таблицу стилей сайта, допустим так:

#toTop {

width: 90px;

position: fixed;

bottom: 15px;

left: 1350px;

cursor: pointer;

display: none;

background: #4E7092;

border: 3px solid #336699;

padding: 7px;

text-align: center;

color: #FFFFFF;

font: 14px Verdana, Arial, Helvetica, sans-serif;

z-index: 1100;

}

Не забываем обновлять файлы, в которые вносим изменения. После таких простых действий и после обновления страницы наблюдаем результат — при прокрутке вниз появляется кнопка, при возвращении назад кнопка плавно исчезает.

Посмотреть можно прямо на этом сайте. Правда в настоящее время кнопка отображается в виде иконки.

Прокрутили, допустим, до самого низа, кликаем по кнопке и страница плавно возвращается наверх.

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

Значение в строчке кода if($(this).scrollTop() > 200) определяет в пикселях, когда кнопка будет появляться и исчезать.

Изменяя параметр $(‘body, html’).animate({scrollTop: 0}, 500) в коде скрипта, получим изменение скорости прокрутки в миллисекундах, так 500 миллисекунд воспринимается вполне нормально.

Стили также можно менять в соответствии с дизайном сайта. Можно изменить ширину – width: 90px, позиционирование – bottom: 15px, left: 1350px, можно изменить фон кнопки – background: #4E7092, границу кнопки – border: 3px solid #336699, отступы, шрифт и т. д.

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