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

  • Опубликовано:
  • Блог: Личные записи
  • Редактировалось: 1 раз — 1 декабря 2021
  • Играет: Rammstein - Los
0
Голосов: 0

730

Памятка:
Ставим кнопочку «вверх» на свой сайт.
На самом деле, вставить такой скрипт можно без проблем на любой сайт, либо любую CMS,хоть на чистую страницу html. Основное условие – на сайте должна быть подключена jQuery библиотека.
Приступим к установке:
Шаг 1. Добавляем JavaScript в шаблон сайта, перед закрывающим тегом </head>
Код PHP:
  1. <script type="text/javascript">$(document).ready(function(){
  2. $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
  3. $('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
  4. });</script>
К примеру, для WordPress нужно отредактировать файл шаблона header.php, а для DLE нужно добавлять код в шаблон main.tpl.
Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом </body>
Код PHP:
  1. <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:
  1. .b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
  2. .b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
  3. .b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
  4. 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 стиль, отвечающий за закругление краев блока.
← "Омерзительная Америка" Наши братья гагаузы →

Комментарии