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

Кнопка “Наверх” для сайта стала появляться у многих на сайтах и блогах с 2010 годов. Является ли эта кнопка полезной и пользуются ли ей пользователи? Пользуются, но мало. Поэтому эту кнопку обычно добавляют где-нибудь с краю сайта (справа внизу чаще всего).

Реализации кнопки наверх три. Естественно каждый из них можно еще поделить на какие-то тонкости, но базовых идей три. Мы рассмотрим каждую из них и дадим каждому свою оценку.

Способы реализации кнопки наверх

Начну с самого лучшего способа (сложность реализации – средне).

1. На основе JavaScript и AJAX (JQuery)

На этом сайте реализован как раз ниже описанный пример.

В этом способе мы должны получить отличную кнопку, со следующими характеристиками:

  • нажатие кнопки обеспечит плавный переход вверх страницы;
  • кнопка будет прозрачной;
  • есть возможность задания высоты в пикселях, когда кнопка станет видимой;

Если делать все по инструкции, то проблем с созданием кнопки возникнуть не должно. Итак, инструкция по шагам:

A. Создание js-файла

Откройте любой блокнот (я рекомендую Notepad++) вставьте код ниже и сохраните его с расширением .js (например, gototop.js):

(function() {
function gotoTop(fast, time) {
fast = fast || 0.1;
time = time || 12;
var dx = 0;
var dy = 0;
var bx = 0;
var by = 0;
var wx = 0;
var wy = 0;
if (document.documentElement) {
dx = document.documentElement.scrollLeft || 0;
dy = document.documentElement.scrollTop || 0;
}
if (document.body) {
bx = document.body.scrollLeft || 0;
by = document.body.scrollTop || 0;
}
var wx = window.scrollX || 0;
var wy = window.scrollY || 0;
var x = Math.max(wx, Math.max(bx, dx));
var y = Math.max(wy, Math.max(by, dy));
var speed = 1 + fast;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
if(x > 0 || y > 0) {
var invokeFunction = "top.gotoTop(" + fast + ", " + time + ")"
window.setTimeout(invokeFunction, time);
}
return false;
}
function scrollTop(){
var a = document.getElementById('gotoTop');

if( ! a ){
// если нет элемента добавляем его
var a = document.createElement('a');
a.id = "gotoTop";
a.className = "scrollTop";
a.href = "#";
a.style.display = "none";
a.style.position = "fixed";
a.style.zIndex = "9999";
a.onclick = function(e){ e.preventDefault(); window.top.gotoTop(); }
document.body.appendChild(a);
}

var stop = (document.body.scrollTop || document.documentElement.scrollTop);
if( stop > 550 ){
a.style.display = 'block';
smoothopaque(a, 'show', 30);
} else {
smoothopaque(a, 'hide', 30, function(){a.style.display = 'none';});
}
return false;
}
//функция прозрачности
function smoothopaque(el, todo, speed, endFunc){
var tartop = Math.round( el.style.opacity * 100 ),
op = startop;
if(todo == 'show')
endop = 100;
else
endop = 0;

clearTimeout( window['top'].timeout );
window['top'].timeout = setTimeout(slowopacity, 33);

function slowopacity(){
if( startop < endop ){
op += 7;
if( op < endop )
window['top'].timeout = setTimeout(slowopacity, speed);
else
(endFunc) && endFunc();
}
else {
op -= 7;
if( op > endop ){
window['top'].timeout = setTimeout(slowopacity, speed);
}
else
(endFunc) && endFunc();
}
setopacity(el, op);
}
}
function setopacity(el, opacity){
el.style.opacity = (opacity/100);
el.style.filter = 'alpha(opacity=' + opacity + ')';
}
if (window.addEventListener){
window.addEventListener("scroll", scrollTop, false);
window.addEventListener("load", scrollTop, false);
}
else if (window.attachEvent){
window.attachEvent("onscroll", scrollTop);
window.attachEvent("onload", scrollTop);
}
window['top'].gotoTop = gotoTop;
})();

B. Настройка стиля

Добавьте в файл стилей следующий код (файл стилей, это файл с расширением .css). Чаще всего его имя main.css или style.css:

#gotoTop {
position: fixed;
bottom: 60px;
width: 56px;
height: 96px;
margin-left: 1170px;
background: url(top.png) no-repeat 0px 0px;
}
#gotoTop:hover {
background: url(top.png) no-repeat -56px 0px;
}

Вместо top.png нужно прописать полный или относительный адрес своей картинки. Вместо 0px 0px и -56px 0px нужно прописать свои смещения. Либо же не использовать смещения, а просто воспользоваться другой картинкой при нажатии.





C. Подключение скриптов к сайту

В приведенном примере мы использовали технологию AJAX, поэтому необходимо подключить библиотеку jquery. Также нужно подключить созданный вами файл gototop.js в первом пункте:

<head>
...
<script type="text/javascript" src="gototop.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="gototop.css" />
...
</head>

А в самом низу сайта (перед тегом body) добавить строчку:

<a id="gotoTop" href="#" onclick="top.gotoTop(); return false;"></a>

Все файлы, которые необходимы для этого я собрал в архиве: gototop.rar

2. Кнопка без применения AJAX

Реализация этого метода очень простая, а точнее проще некуда. При этом этот метод я бы разбил даже на два подметода.

2.1. С применением якоря ссылки

Вверху сайта для какого-нибудь элемента прописываем id. Логично было бы прописать его для заголовка <h1>, потому что это начало контента. А внизу можно разместить ссылку на якорь. Код примерно такой:

<body>
...
<h1 id="top">Заголовок статьи</h1>
...
<a href="#top" class="totop"><img src="top.png" alt="Наверх" border="0"></a>
...
</body>

Чтобы все было красиво рекомендую прописать стиль для класса totop. Примерно следующий:

.totop {
position: fixed;
bottom: 40px;
right: 20px;
background: none;
cursor: pointer;
}

Минусы этого способа существенные:

  • Кнопка наверх будет всегда на виду, даже если пользователь и так вверху
  • Необходимо прописывать якорь. Это может быть не всегда удобно
  • Переход наверх получается резким (нет плавного движения)

Преимущество одно: не нужно использовать скриптов.

2.2. С применением JavaScript

Способ с использованием JavaScript очень похож на предыдущий. Та же кнопка, только на этот раз нам не нужно будет делать якорь на всех страницах. Вот код:

<body>
...
<a href="#" id="gotoTop"><img src="top.png" alt="Наверх" border="0"></a>
<script type="text/javascript">
$(function() {
$("#gotoTop").scrollToTop();
});

</script>
...
</body>

Стиль можно прописать такой же, как и в примере 2.1.

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




Читайте также:

• Как сделать фон для сайта

• Бегущая строка для сайта

• Все про CSS border

• Все про CSS transition

• Коды символов для вставки

• Как добавить социальные кнопки на сайт

• Коды и названия html цветов для сайта

• Как сделать кнопку html

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.