Кнопка Наверх для сайта

Далее представлен пошаговый пример реализации кнопки Наверх для вашего сайта, которая появляется только, если содержимое веб-страницы вышло за пределы окна, т.е. в окошке браузера появился вертикальный ползунок прокрутки.

Кнопка Наверх для сайта

Скачать рабочий пример

1. Подключите JQuery к сайту, и добавьте также следующий сценарий на JavaScript:

$(document).ready(function() {

  /*** Кнопка Наверх ***/
  
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      $('#to-top').fadeIn();
    } else {
      $("#to-top").hide();
    }
  });

  $('#to-top').click(function () {
    $('body,html').animate({
      scrollTop: 0
    }, 599);

    return false;
  });
  
});

2. К стилям допишите следующие строчки:

#to-top {
  display: none;
  cursor: pointer;
  position: fixed;
  z-index: 1;
  bottom: 20px;
  right: 20px;
  height: 30px;
  width: 30px;
  overflow: hidden;
  background: #e51d22 url(../img/to-top.png) 0 0 no-repeat;
}

3. Перед тегом </body> добавьте:

<div id="to-top"></div>

Все. Кнопка плавной прокрутки наверх готова.

Опубликовано 23-01-2014 в 11:39


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты