Кнопка «Вверх» для сайта на jQuery от Яндекса

Май, 23rd 2013Рубрика: Web-мастеринг 10387
Подписаться на комментарии по RSS
наверх

Привет! Сегодня расскажу о том, как легко прикрутить к любому блогу или форуму кнопку "ВВЕРХ" как у меня на сайте. Удобства и интерактивности никогда не бывает много, тем более, когда это не занимает много времени. Этот простой и легкий скрипт на jQuery я подсмотрел на Yandex и сделал себе аналогичный.

Вообще, в настоящее время, разработка сайтов всё больше напоминает конструктор. В сети полно готовых скриптов и модулей, которые остается только грамотно скомпоновать на своем сайте. Но, для этого, всё-таки, необходимо иметь начальные знания и представления о CSS, PHP и JavaScript.

Понадобится всего пара минут времени для создания красивой и работающей кнопочки "Наверх"! (единственное условие - у вас должна быть подключена библиотека jQuery).

  1. В шаблон сайта, перед закрывающим тегом </head> добавляем:
  2. <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>
  3. Перед закрывающим тегом </body> в шаблон сайта добавляем следующий html-код:
  4. <div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>
  5. Осталось добавить CSS-стили для оформления кнопки «Наверх» в файл стилей вашего сайта (например styles.css)
  6. .b-top {
      z-index:2600;position:fixed;left:0;
      bottom:70px;width:35%;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;border-radius:7px;
      background:#888 url(img/b-top.png) no-repeat 50% 11px;
    }
  7. файл с изображением стрелки (b-top.png скачать)

Что тут можно настроить или изменить под себя (для тех, кто вообще не шарит в CSS):

  • первым делом измените путь к файлу с изображением стрелки на тот, куда вы его сохранили на сайте
  • background:#888 - цвет фона кнопки
  • width:35%; - положение кнопки относительно правого края страницы
  • bottom:70px; – смещение кнопки относительно нижнего края страницы

Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Комментариев: 2

  1. 2013-10-30 в 01:37:36 | Данил

    Привет, я - HTML верстальщик.

    Кидайте макет - оценю.

    Отзывы и примеры тут - danil-html.ru

  2. 2015-01-18 в 17:30:20 | Михаил

    Утащил себе такую кнопочку. Всё получилось

comments powered by HyperComments
Без регистрации
ваш комментарий будет опубликован после проверки
Регистрация на сайте

На указанный адрес будет отправлено письмо с кодом активации. Вы можете настроить собственный профиль и стать активным участником или автором.