Кнопка «Вверх» с плавной прокруткой

Без плагина WordSmall

Часто возникает ситуация, когда на одной странице содержится довольно много текста и рисунков, и после прочтения статьи довольно проблематично вернуться в самый верх сайта. Ведь делать это прокруткой колесика вверх или с помощью бегунка не всегда удобно, особенно если вы на мобильном устройстве. Давайте сделаем жизнь посетителям нашего сайта немного комфортнее. Добавим кнопку с помощью которой вернуться наверх можно одним нажатием. Причем появляться эта кнопка должна по мере прокрутки сайта вниз, чтобы не засорять страницу лишней информацией.

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

Установка.

В первую очередь подключим библиотеку jQuery, если вы ранее ее подключали, то снова это делать не нужно. Открываем файл header.php, он находится внутри вашей темы, и добавляем между тегами <head> </head> следующий код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Теперь нужно открыть файл footer.php, также находится вашей теме и внизу перед тегом </body> добавить скрипт.

<script type="text/javascript">
$(function() {
 $.fn.scrollToTop = function() {
  $(this).hide().removeAttr("href");
  if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
  var scrollDiv = $(this);
  $(window).scroll(function() {
   if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
   else $(scrollDiv).fadeIn("slow")
  });
  $(this).click(function() {
   $("html, body").animate({scrollTop: 0}, "slow")
  })
 }
});
$(function() {
 $("#gotop").scrollToTop();
});
</script>

Не спишите закрывать этот файл, нам нужно еще вставить код для вывода кнопки вверх, можно вставить прям перед скриптом, который добавили ранее.

<a id="gotop" href="#"></a>

Библиотеку подключили, вывод кнопки вверх сделали, давай добавим стили. Откройте файл style.css и в конце вставляем следующий код:


#gotop{
    background:url(images/gotop.png) no-repeat;
        z-index: 9999;
        opacity: 0.5;
        width: 90px;
        height: 90px;
        display: block;
        position: fixed;
        cursor: pointer;
        right: 15px;
        bottom: 7px;
        float:right;
}
#gotop:hover{
         opacity: 0.9;
}

В третей строке указано изображение кнопки вверх «gotop.png» поэтому добавьте какую-нибудь картинку или можете скачать варианты ниже в PSD формате.

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

Скачать

— Не забывайте делиться с друзьями в социальных сетях: —

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 7
  • BukTop

    А где папка images должна быть?

    Создал в корневом, а стрелка не отображается.

    • WordSmall

      Вот указан путь картинки (стрелка):

      background:url(images/gotop.png) no-repeat;

      Поместите стрелку в папку «images», которая находится в вашей теме с именем gotop в формате png.

      • BukTop

        Почему у меня картинка на главной страницы из-за скрипта пропала? С плагинами конфликтует?

      • WordSmall

        Что за картинка и какой плагин?

  • BukTop

    Всё разобрался — в папку images установленной темы wordpress.

  • Артур

    Подскажите пж. А как сделать, чтобы при нажатии не так быстро поднимала вверх? И ещё хотелось бы чтоб кнопка появилось медленно при спускания страницы вниз. Спасибо.

    • WordSmall

      Вроде и так не плохо, но... Там скорость подъема зависит от расстояния шапки, чем дальше от нее тем быстрее скорость. Если нужно изменить, то замените нижнею строку на эту

      $("html, body").animate({scrollTop: 0}, 5000) (меняйте число 5000 на свое усмотрение).

      Эта строка if ($(window).scrollTop() <= "900") $(scrollDiv).fadeOut("slow") отвечает за расстояние появления кнопки (900px)...

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