05.06.2013

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

Зачастую посты занимают куда больше места, чем на один экран. Значит возникает потребность в кнопке ВВЕРХ, с помощью которой можно быстро вернуться в начало страницы.

Конечно, достаточно часто кнопка "Вверх" встроена в набор кнопок "Поделиться" для социальных сетей. Вот, например, как на этом сайте. Самая нижняя кнопка и выполняет эту функцию. Кстати, если вы еще не знаете как вставить такие кнопки на свой сайт, можете посмотреть соответствующий пост.

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

 

Ползая по просторам интернета в поисках подходящего скрипта,  в одном  из блогов нахожу интересное решение. Хочу поделиться со всеми нуждающимися.

Скрипт абсолютно прост, его можно вставить в любой сайт, на любой cms, на WordPress, на Data Lite Engine (DLE), на Joomla и даже на голом HTML+CSS.

Единственное требование - наличие подключенной библиотеки jQuery.

Нам потребуется рисунок стрелочки.

Размер: 33 на 16 пикселей в формате png с прозрачностью.

У меня такая: Стрелка для кнопки ВВЕРХ

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

Не забудьте закинуть эту картинку в корень вашего сайта. Имя картинки должно быть b-j-top.png, но вы можете дать и собственное имя, только тогда вам придется поменять это имя и в стилях (на шаге 3).

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

У меня на сайте это выглядит так:

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

Для сайтов на WordPress надо будет редактировать файл шаблона header.php, а в DLE вносить изменения необходимо в шаблон main.tpl.

Шаг 1

Копируем следующий код и вставляем его внутри тегов <HEAD>...</HEAD>.

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

Шаг 2

Добавляем небольшой фрагмент HTML-кода в конце, перед закрывающим тегом </BODY> 

<div id="scroller" class="b-top" style="display: none;">
<span class="b-top-but">наверх</span>
</div>

Шаг 3

Вносим изменения в таблицу стилей.  Файл может называться style.css или как-нибудь иначе, здесь это не имеет значения. Просто вставьте данный фрагмент кода в конец любого, имеющегося у вас на сайте файла css.

.b-top {
z-index:2600;
position:fixed;
left:0;
bottom:90px;
width:34%;
margin-left:50%;
opacity: 0.5;
filter:alpha(opacity=50);
}
.b-top:hover {
opacity:1;
filter:alpha(opacity=100);
cursor:pointer;
}
.b-top-but {
z-index:2600;
position:absolute;
display:block;
left:56px;
bottom:0;
margin:0 0 0 90%;
padding:32px 12px 4px;
color:white;
background:#D8D5C2 url(http://site.name/b-j-top.png) no-repeat 50% 11px;
border-radius:7px;
}

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

Кстати, если у вас проблемы с фотошопом и картинками, вместо этого имени можно вставить следующую ссылку:

http://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png

Все дело в том, что этот скрипт взят у Яндекса, это именно он использует у себя такую кнопку Вверх. :)

И последнее, стили конечно же можно менять. 

Что можно изменить безболезненно.

color:white  - цвет шрифта, которым написано слово НАВЕРХ.

background:#D8D5C2 - фон кнопки вокруг стрелки.

bottom:90px  - высота кнопки от низа страницы.

width:34%;  margin-left:50% - положение на странице.


Да, поскольку все-таки это не мое личное изобретение, передаю большое спасибо АлаичЪ'у.