Построение сайта, продвижение, работа в сети

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

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

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

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

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

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

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

Для реализации этой идеи, сначала надо подключить 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, отступы, шрифт и т. д.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Поиск Яндекса
Группа Компьютерная грамотность
Подпишитесь на новости

Введите ваш email адрес:

Media Markt
Gyrotown