falbar Плавная кнопка прокрутки «Наверх»

Плавная кнопка прокрутки «Наверх»

19 ноября 2014 2810 0

В этой статье я хочу уделить внимание такому вопросу: как сделать кнопку прокрутки «Наверх»? После прочтения вы получите готовый скрипт, который без труда установите себе на сайт.

Реклама

Наверняка, на многих сайтах вы видели данный функционал. Когда страницы длинные, и пользователю приходится долгое время скролить обратно в начало, то присутствие кнопки прокрутки «Наверх» явный признак заботы о нём. Стоит сказать, что до сих пор встречаются сайты, которые не используют данное решение, хотя поставить себе скрипт занимает пару минут.

И так, давайте приступим, начнём с подключения jQuery библиотеки:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Теперь нам необходимо задать правила стилей для кнопки, чтобы поместить её в правый нижний угол и скрыть. Правила, к слову, могут быть любыми, в зависимости от дизайна сайта, но не стоит забывать, что кнопка изначально не должна отображаться.

#totop{
 display: none;
  background: url(totop.png) no-repeat center center;
 height: 52px;
   width: 52px;
    overflow: hidden;
   position: fixed;
    right: 10px;
    bottom: 10px;
   opacity: 0.7;
}
  #totop:hover{
       opacity: 1;
 }

Пишем jQuery функцию, которая будет принимать два параметра: элемент и скорость прокрутки.

function scrollToTop(element, speed){

   $(window).scroll(function(){
        if($(this).scrollTop() > 300){
           element.fadeIn(600);
        }else{
          element.fadeOut(600);
       };
  });

 element.click(function(){

       var elementClick = $(this).attr("href"),
          destination = $(elementClick).offset().top;

     $("html:not(:animated),body:not(:animated)")
      .animate({
          scrollTop: destination
      }, speed);

      return false;
   });

 return false;
};

После загрузки страницы вызываем её:

$(function(){
   scrollToTop($("#totop"), 1000);
});

Как видите весь код, я поместил в функцию, это сделано, чтобы избежать случаев, когда работая с ajax необходимо вызывать заново скрипт.

Сам же написанный код делиться на две части:

  1. Отображение и скрывание кнопки при прокрутке страницы;
  2. Обработка клика по кнопке (обрабатывая событие клика, стоит возвращать false, чтобы путь #id не прописывался в адресной строчке).

Вот и всё, кнопка «Наверx» для сайта готова. Вам останется только скачать скрипт и подключить.

Реклама
Комментариев еще не оставлено
no_avatar