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

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

dorofeeva 5-06-2013, 15:43 10 660 Уроки по CMS / Уроки по DLE

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

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

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

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

Скрипт абсолютно прост, его можно вставить в любой сайт, на любой 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>.

$(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>

<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% - положение на странице.

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

Авторизация на сайте

Последнее из портфолио

Как с нами связаться

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

Похожие новости

Добавить комментарий