Заметка кодера-любителя

Опубликовано: 3884 дня назад (27 февраля 2014)
Блог: Личные записи
Редактировалось: 1 раз — 12 мая 2023
Играет: Rammstein - Los

Голосов: 0

1063

Памятка:

Ставим кнопочку «вверх» на свой сайт.
На самом деле, вставить такой скрипт можно без проблем на любой сайт, либо любую CMS,хоть на чистую страницу html. Основное условие – на сайте должна быть подключена jQuery библиотека.
Приступим к установке:
Шаг 1. Добавляем JavaScript в шаблон сайта, перед закрывающим тегом </head>

Код PHP:

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

К примеру, для WordPress нужно отредактировать файл шаблона header.php, а для DLE нужно добавлять код в шаблон main.tpl.
Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом </body>

Код PHP:

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

Опять же, для WordPres редактируем файл footer.php, а для DLE снова main.tpl.
Шаг 3. Добавляем CSS-стили блока и кнопки вверх в файл style.css (название файла style.css у вас может быть и другим, но это не важно, добавьте код в любой файл стилей, который подключается к сайту).

Код PHP:

.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 100%;padding:32px 12px 4px;
color:white;background:#D8D5C2 url(http://megdan.ru/images/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}

Рекомендую сохранить картинку себе на сервер, будет надежнее.
Настраиваемые переменные:
bottom:90px; – смещение блока с кнопкой относительно низа страницы;
width:34%;margin-left:50%; — вот с этими параметрами вам придется поколдовать, т.к. четкой инструкции тут быть не может. Данные значения я выявил экспериментально, проверяя положение кнопки на разных разрешениях экрана именно для моего шаблона на блоге. Чего и вам рекомендую;
padding:32px 12px 4px; — с помощью этих значений вы можете регулировать размер блока с кнопкой, управляя отступами относительно надписи «вверх». 32px – отступ сверху, 12px – отступы слева и справа, 4px – отступ снизу;
color:white; — цвет надписи «вверх»;
border-radius:7px; — это css3 стиль, отвечающий за закругление краев блока.

Заметка кодера-любителя

Комментарии