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

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

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

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

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>

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

  • Иван: к записи Привет всем, доброго времени суток! Я излазил весь »
  • Александер: к записи Потом пригляделся, вроде Вы не это имели в виду и »
  • Александер: к записи У Вас не русифицируется, потому что не везде включ »
  • Администратор: к записи Это надо использовать функции вашей CMS. »
  • Alex: к записи Ребят, а подскажите пожалуйста, как реализовать с »
  • Владимир: к записи А как теперь будет выглядеть ссылка для перехода н »
  • Администратор: к записи Не знаю. »

Статистика спама

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