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

Май, 23rd 2013Рубрика: Web-мастеринг 10575
Подписаться на комментарии по 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; – смещение кнопки относительно нижнего края страницы

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

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

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

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

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

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

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

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

  3. 2015-07-19 в 09:24:21 | ZeroFrize

    Автор ты мудак ебанутый, копируй сам со своими настройками уёбок, лучше бы не выкладывал нихуя.

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

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