Кнопка вверх с плавной прокруткой на WordPress
Опубликовано: 01.09.2018
Часто возникает ситуация, когда на одной странице содержится довольно много текста и рисунков, и после прочтения статьи довольно проблематично вернуться в самый верх сайта. Ведь делать это прокруткой колесика вверх или с помощью бегунка не всегда удобно, особенно если вы на мобильном устройстве. Давайте сделаем жизнь посетителям нашего сайта немного комфортнее. Добавим кнопку с помощью которой вернуться наверх можно одним нажатием. Причем появляться эта кнопка должна по мере прокрутки сайта вниз, чтобы не засорять страницу лишней информацией.
Установить кнопку вверх можно несколькими способами, мало того, существует много вариантов прокрутки. Плавная, быстрая, верх и вниз, но самая оптимальная – плавная, выполняет свою работу и приятный дает эффект. Устанавливать будем с помощью скрипта, без использования плагина, лишний вес не к чему. Тем более сложного ничего нет и времени займет пару минут, вставить код и добавить стили, проще простого.
Плавная прокрутка вверх (WPFront Scroll Top)
Установка.
В первую очередь подключим библиотеку 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 формате.
