все о заработке в интернете
инфо-бизнесе с нуля, электронной коммерции
Мой профиль Вконтакте

Как сделать кнопку наверх для сайта разными способами

Всем привет. Для удобства пользователей навигация на сайте должна быть простой и понятной. Специальные элементы интерфейса сайта помогают просматривать страницы, например, кнопка наверх. Обычно она располагается в нижней части сайта и быстро перенаправляет посетителя в начало страницы. Это особенно удобно при чтении сайта с большим количеством контента. О том, как сделать кнопку наверх и пойдет речь в этом обзоре. А саму кнопу вы можете увидеть у меня в правом нижнем углу.

кнопка наверх для сайта

Установка кнопки для сайтов на html

С применением HTML кнопку «наверх» добавить несложно. При этом методе не задействуются библиотеки или вспомогательные скрипты. При желании можно вставить CSS.

В html-код сайта в файл footer.php включается внутренняя ссылка:

<a href="#" title="Вернуться к началу"class="topbutton">Наверх</a>

Данный файл располагается в админ-панели вашего блога. Либо с помощью файлового менеджера FileZilla скачиваете файл footer.php и добавляете перед закрывающим тегом </body> данный код.

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

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;
}

HTML код

Вставляем HTML код перед тегом </body>:

<DIV ID = "toTop" > Наверх </ DIV >

Вариант 2

Плавный просмотр снизу вверх можно организовать, добавив CSS, скрипт (JavaScript) и изображение. Значок «наверх» находится в правом нижнем углу и становится видимым при просмотре содержимого сайта вниз.

HTML

После главного содержания страницы или перед тегом </body> размещаем HTML код:

<a href="#" class="scrollup">Наверх</a>

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;
}

CSS определяет и отображение, и позицию значка «наверх» (в примере это отступы 100 px справа и 50 px снизу).

jQuery

Добавляем jQuery, вписав между тегами <head>...</head>:

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

После подключения библиотеки вписываем код jQuery:

<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>

ScrollTop задает вертикальную позицию полосы прокрутки. Если оно более 100 px, отображение значка будет автоматическим. Значение 0 позволяет прокрутить содержимое страницы вверх, 600 задает скорость анимации в миллисекундах.

Вариант 3

Помимо плавного просмотра, этот метод позволяет сделать анимированную кнопку. При подсвечивании курсором значок «наверх» медленно загорится.

Здесь используем изображение для значка, CSS и jQuery.

HTML

<p id="back-top">
<a href="#top"><span></span>Back to Top</a>
</p>

Код вставляется только перед главным контентом страницы. Например, в файл single.php.

Тегу <body> присваиваем идентификатор top.

<body id="top">

Когда тегу <body> присваивается id, в коде вызова кнопки #top заменяем на #наш-id.

CSS код

CSS задает отображение и положение значка «наверх». При подсвечивании курсором задержка появляется со свойством transition. Вписываем код в CSS файл.

#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}

jQuery код

Первая строка кода подключает библиотеку jQuery. Если библиотека уже имеется, эту строку пропускаем. Основной код вставляем между <head>...</head>

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>

Можно настроить значения:

  • количества пикселей, после прокрутки которых кнопка становится видимой (100);
  • прокрутки до самого верха, т.е. нулевого пикселя (0);
  • скорости прокрутки в миллисекундах (800).

Если вам было что-то непонятно, обязательно посмотрите видео, где я все наглядно объясняю.

Кнопка для сайта на WordPress

Популярные CMS также имеют свои способы для установки кнопки «наверх» на сайт. Например, для сайта на движке WordPress можно применить следующий скрипт.

Чтобы скрипт работал в WordPress, нужно подключение библиотеки jQuery, перед js-кодом. Если она уже подключена, то вставляем этот код в главный файл сайта между тегами head. Чаще всего главный файл это index.html, index.php. Для блога WordPress лучше вставить код в файл header.php шаблона сайта.

JavaScript код:

<script type="text/javascript">
/* knopka naverh
-----------------------------------------------------------*/
$(document).ready(function() {
$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>

Присваиваем кнопке «наверх» для WordPress стили, css-код:

/* knopka naverh
-----------------------------------------------------------*/
#back-top {
position: fixed;
bottom: 0px;
right: 15px;
z-index:999;
}
#back-top a {
width: 100px;
display: block;
text-align: left;
font: 14px/100% Verdana;
text-decoration: none;
color: #fff;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #fff;
}
/* arrow icon (span tag) */
#back-top span {
width: 100px;
height: 30px;
display: block;
margin-bottom: 7px;
line-height:30px;
background: #777 url(up-arrow.png) no-repeat center center;
opacity:0.7;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
opacity:1;
}

Пишем css-код в таблицу стилей style.css непосредственно сайта, либо его шаблона. Для сайта, созданного на WordPress, файл можно найти в папке с темой (wp-content/themes/ваша_тема/style.css).

Вписываем html-код кнопки «наверх»:

<!--knopka naverh
------------------------------------------------------------->
<p id="back-top" style="display: none;">
<a href="#top"><span> Наверх</span></a>
</p>

Помещаем его в главном шаблоне сайта, перед тегом body. В сайте, реализованном на WordPress, код вносим в файл footer.php в тело. Значок «наверх» перемещаем в главную папку с файлами сайта. В WordPress чаще всего это файл httpdocs или public_html.
Обновляем страницу сайта, в правой нижней части экрана отобразится значок «наверх» при прокрутке содержимого страницы вниз. WordPress дает возможность изменить дизайн значка, сменив css и т.д.

Если рассмотренные способы кажутся сложными, всегда можно установить кнопку «наверх», используя готовые расширения и плагины для WordPress. Преимуществом работы с готовым плагином является простота установки, недостатком же – дополнительная нагрузка на сервер.

Надеюсь вы узнали для себя много полезного. Делись в комментариях, используете ли вы такие фишки у себя на блогах.

С уважением, Александр Пузатых

Понравилась статья? Поделитесь с друзьями!