Как сделать кнопку "наверх" для сайта. Подробное руководство, несколько методов реализации

Доброго времени суток дорогие друзья. Сегодня я хотел бы рассказать о такой полезной вещи как кнопка “вверх” или “наверх”, которая предназначена для быстрого перехода пользователя на шапку сайта, ну или какому другому важному блоку сайта. В общем из данной статьи вы узнаете как сделать кнопку наверх для сайта.

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

Ну, а теперь давайте расскажу несколько возможных вариантов реализации данной фичи. Начну с самого простого варианта – плагина для WordPress. Порыскав пару десятков минут по интернету, а если быть конкретнее по официальному сайту wordpress, я набрел на плагин под названием Scroll to Top.

Установка и настройка плагина Scroll to Top

Установить плагин Scroll to Top можно из репозитория wordpress, по имени плагина или с официального сайта wordpress по адресу: http://wordpress.org/extend/plugins/scroll-to-top/. Устанавливайте плагин удобным вам способом. Активируем плагин и заходим на страницу настроек плагина Scroll to Top, панель администратора, меню “Settings”->”Scroll to Top”.

Enable  – включить\выключить кнопку
Text – текст кнопки
Width – ширина кнопки
Text Color – цвет текста кнопки
BackGround Color – цвет фона кнопки

Результат работы плагина , смотри ниже

Ну с плагином вроде бы разобрались. Теперь давайте поговорим о том как все тоже самое можно реализовать при помощи CSS и JavaScript. Так сказать метод для противников плагинов. Если честно мне метод с CSS и JQuery нравится больше, так как для того чтобы реализовать такую возможность как кнопку “наверх”, лично я считаю что не нужно использовать плагин. Но обо всем по порядку, от слов к делу.

Кнопка “вверх”\”наверх” при помощи CSS и JavaScript(JQuery)

Итак, начну с оформления будующей кнопки, с написания css кода для кнопки


.top-button{
position:fixed;
width:120px; /*ширина кнопки*/
height:20px; /*высота кнопки*/
color:#fff; /*цвет текста кнопки*/
display:block;
background:#000; /*цвет фона кнопки*/
z-index:1000;
bottom:20px; /*позиция кнопки-отступ от нижнего края страницы*/
right:20px; /*позиция кнопки-отступ от правого края страницы*/
font-weight:bold;
text-align:center;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
border:2px solid #eee; /*обводка вокруг кнопки*/
opacity:1.0; /*прозрачность кнопки, значения 0.0-1.0(0.0,0.1,0.2 и т.д. до 1.0)*/
}

Соответственно если использовать данный код для WordPress, тогда необходимо его вставить в файл style.css вашей темы. Далее необходимо указать в каком месте кнопка будет располагаться, на странице, лично я вставил в конце страницы, если WordPress, вставляем код в файл footer.php вашей темы, следующий код

<a href='#' class='top-button'>Наверх</a>

В принципе на этом можно было бы завершить весь процесс, так как и такой вариант работать будет, но давайте добавим слегка изящества для пролистывания страницы и самой кнопки. Сделаем эффект плавного пролистывания страницы, и эффект появления и исчезновения кнопки. Для этого воспользуемся JavaScript-ом, и библиотекой JQuery.

Сначала подключаем файлы библиотеки jquery к сайту. Скачать библиотеку JQuery можно с сайта jquery.com/download/. Я использовал jquery библиотеку версии 1.4.2, соответственно мой файл назывался jquery-1.4.2.min.js, в случае если вы будете использовать другую версию, пожалуйста учтите это при подключении файла, и переименуйте при необходимости.

Вот кстати версия которую использовал я, Библиотека Jquery 1.4.2 Скачать. Файл библиотеки необходимо закинуть в папку темы, я создал дочернюю папку js, и в нее закинул необходимый файл.  После всего проделанного в файл header.php темы, вставляем следующий код.


<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {

$(".top-button").hide();

$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('.top-button').fadeIn();
} else {
$('.top-button').fadeOut();
}
})
});

jQuery(".top-button").click(function(){
jQuery('html, body').animate({scrollTop: "0px"});
});

});
</script>

Вот и всё! Если вы нигде не ошиблись должно получится примерно следующее.

Надеюсь у меня получилось подробно рассказать Вам, как сделать кнопку “Наверх” для сайта. По окончанию хотелось бы поинтересоваться, какой способ добавления кнопки,приемлем именно для вас и почему, ответов жду в комментарии. Всем пока, и удачи во всех начинаниях.

С уважением, . Google+