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

Кнопка "Наверх" для сайта стала появляться у многих на сайтах и блогах с 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>, потому что это начало контента. А внизу можно разместить ссылку на якорь. Код примерно такой:

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

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

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

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

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

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

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

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