Wordpress делаем кнопку вниз. Кнопка Вверх для WordPress — быстрый переход в начало страницы. Полупрозрачная кнопка при помощи JQuery и CSS

(Последнее обновление: 03.05.2019)

Всем привет! У вас есть на сайте кнопка вверх WordPress для плавной прокрутке страницы ? Ещё не установили. Давайте не откладывайте установку волшебной кнопки на потом, ведь с кнопкой вверх на сайте очень удобно, особенно вашим посетителям. Без неё ну ни как, меня просто бесит когда на сайте её нет. Приходится колёсико крутить для того, чтобы вернуться к началу страницы. Плохо, очень плохо без кнопочки. Надо веб-мастерам больше заботится о своих посетителях.

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

Дамы и господа, будьте внимательней к своим читателям, а то потеряете их навсегда.

Сегодня я познакомлю вас с лучшими плагинами с помощью которых вы сможете установить кнопку Back to top (Scroll To Top) на свой сайт или блог . подобраны по наибольшему скачиванию модулей пользователями платформы WP. Напомню, все плагины можно установить стандартным способом, из админки, через поиск и загрузчик плагинов. Скачивать ни чего не надо. Установил, активировал, настроил и всё.

Как сделать кнопку вверх на сайте. Плагины - кнопка вверх для WordPress

Первым у нас пойдёт простой плагин jQuery Smooth Scroll

Плагин jQuery Smooth Scroll

Данный плагин автоматически добавляет кнопку вверх, после установки и активации модуля. Кнопка вверх появится в правом нижнем углу сайта . Как говорится, установил и забыл. Установили плагин уже более 50 700 раз. А вот так выглядит наша кнопочка:

Кнопка вверх на сайте WP

Легкий плагин Smooth Scroll Up - плавная прокрутка вверх

Легкий плагин Smooth Scroll Up

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

Опции для настройки плагина Smooth Scroll Up

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

Плагин WPFront Scroll Top

Добавляем кнопку прокрутки вверх

Модуль WPFront Scroll Top позволяет посетителю легко прокручивать назад до верхней части страницы с полностью настраиваемыми параметрами и изображением. Данный плагин имеет больше настроек и главное, очень большой выбор иконок (изображений) самой кнопки. А так же можно обойтись и без картинки:

Настройка плагина WPFront Scroll Top

И сами изображения кнопок, есть из чего выбрать. Даже, если вам не подходит ни одна картинка кнопки на верх, можно указать ссылку на своё изображение кнопочки:

Выбор кнопки вверх

Согласитесь, довольно приличный набор картинок для волшебной кнопки. Правда, плагин на английском языке, но Google переведёт. А вот пример установленной кнопки на сайте:

Кнопка вверх

Плагин Scroll Back To Top - кнопка на вверх

Плагин Scroll Back To Top

Модуль Scroll Back To Top также имеет ряд настроек и выбора как будет выглядеть кнопка на верх:

Пример кнопок вверх на сайте

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

Кнопку “Вверх” сейчас можно увидеть на многих сайтах. В основном это связано с увеличением количество мобильных пользователей интернета, для которых такая кнопка дает заметное удобство в навигации. Как она работает можно посмотреть на этом сайте – при начале скроллинга страницы вниз внизу справа появляется стрелка прокрутки наверх.

Добавить ее на сайт WordPress довольно просто без плагина с помощью специальной функции javascript. Для этого нужно выполнить 4 шага.

1. Поместите в каталог js вашей темы файл goTop.js со следующим содержанием. Если такого каталога нет вы можете его создать, либо использовать любой другой каталог, однако тогда нужно изменить путь к скрипту goTop.js во втором шаге.

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

$ (function () { $ . fn . scrollToTop = function () { $ (this ) . hide () . removeAttr ("href" ) ; if ($ (window ) . scrollTop () != "0" ) { $ (this ) . fadeIn ("slow" ) } var scrollDiv = $ (this ) ; $ (window ) . scroll (function () { if ($ (window ) . scrollTop () == "0" ) { $ (scrollDiv ) . fadeOut ("slow" ) } else { $ (scrollDiv ) . fadeIn ("slow" ) } } ) ; $ (this ) . click (function () { $ ("html, body" ) . animate ({ scrollTop : 0 } , "slow" ) } ) } } ) ;

2. Поместите в файл footer.php вашей темы перед закрывающим тегом следующий код

/js/goTop.js" type="text/javascript"> $(function() { $("#goTop").scrollToTop(); });

< a href = "#" id = "goTop" alt = "Наверх" title = "Наверх" > < img src = " /images/goUp.png" border = "0" align = "absmiddle" / > < / a >