Здравствуйте, уважаемые посетители!

Я продолжаю публиковать статьи технической тематики.

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

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

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

Первый самый важный, а может и единственный случай, когда кнопка вверх нужна - это наличие огромного количества контента на странице. Если страница длинная, то довольно затруднительно ее листать в самый верх.

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

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

Исходя из этого имеются наиболее распространенные и самые действенные кнопки прокрутки вверх, которые действительно эффективно работают. Один из таких вариантов - это кнопка вверх, как в социальной сети Вконтакте. К реализации этого способа мы и переходим.

Отличительной чертой данной кнопки является ее простота в использовании. Она имеет вид полосы прокрутки в левой части сайта, которая занимает всю высоту ресурса.

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

Сделать точной такую же реализацию, как Вконтакте не получится, но вот приближенный вариант - запросто.

Чтобы реализовать его, нужно всего лишь разместить скрипт на сайте.

Для загрузки скрипта можно разместить сам код между тегами или перед закрывающим тегом в файле footer.php. А можно просто загрузить файл со скриптом на хостинг, а затем просто сделать загрузку файла на сайте.

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

JavaScript

$(document).ready(function() { $("body").append("^ Наверх"); $ (window).scroll (function () { if ($ (this).scrollTop () > 300) { $ (".button-up").fadeIn(); } else { $ (".button-up").fadeOut(); } }); $(".button-up").click(function(){ $("body,html").animate({ scrollTop: 0 }, 100); return false; }); $(".button-up").hover(function() { $(this).animate({ "opacity":"1", }).css({"background-color":"#E1E7ED","color":"#45688E"}); }, function(){ $(this).animate({ "opacity":"0.7" }).css({"background":"none","color":"#45688E"});; }); });

В данном коде можно изменить некоторые параметры под себя.

• Строка 4 отвечает за вывод самой области для прокрутки страницы. В ней прописаны основные стили для отображения кнопки. в принципе, данные параметры должны подойти практически каждому. Но может потребоваться и отредактировать их под себя;
• В строке 7 в скобках имеется число 300, которое отвечает за момент появления кнопки. То есть, кнопка будет появляться только после прокрутки 300 пикселей вниз. Рекомендую тут подобрать такое значение, чтобы прокрутка была возможной только тогда, когда с поля зрения пропадает основное меню сайта или какие-то другие важные элементы в навигации;
• В строке 17 значение 100 отвечает за скорость прокрутки. Чем меньше значение, тем быстрее возвращение вверх страницы.

Данный код можно разместить между тегами в верхушке сайта. Если сайт на WordPress то данная область находится в файле шаблона header.php. Также можно разместить перед закрывающим тегом в самом низу сайта (файл footer.php). Последний вариант я и рекомендую, так как он позволит ускорить загрузку сайта. Выглядеть будет это так.

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

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

JavaScript

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

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

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

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

По данному способу я записал подробный видео-урок.

Такой вариант сейчас и стоит на моем блоге. Я пока не смог проанализировать его полезность. Но, если он стоит на одном из гигантов рунета, то можно смело предположить, что толк от него есть. Конечно при таких масштабах это и ежу понятно. А вот на мелком ресурсе можно хорошенько подумать перед его установкой. Но я смотрю на перспективу, поэтому и поставил такое решение.

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

Состоит из 3х этапов:

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

Можно пойти 2мя путями, как и в первом случае. Либо разместить сам скрипт в нужной области (см. пункт выше) либо же сделать загрузку скрипта через файл. Далее мы будем делать все именно через второй способ, чтобы было эффективно.

Файл скрипта скачайте по кнопке ниже.

Размещаете файл на хостинге и делаете загрузку файл через код в самом низу сайта, как делали это ранее. Файл называется точно также, как и в 1м способе, поэтому можно взять ту же самую строку кода для вывода.

⇓ Назад ⇑ Наверх

Разместить его можно в самом низу сайта, перед закрывающим тегом в файле footer.php.

Затем прописываем стили оформления в свой файл стилей (style.css) и загружаем все измененные файлы на хостинг. Вот сами стили.

/* описание контейнера */ .leftbar-wrap { position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; } /* описание кнопки «Вверх» */ .left-controlbar { height: 100%; display: block; text-decoration: none; } /* описание кнопки «Вернуться» */ #scroll-back { display: block; height: 100%; top: 0; display: none; text-align: center; } /* описание столбца фонового цвета для обеих кнопок */ .active-area { width: 100px; height: 100%; display: block; text-align: center; } /* задаем прозрачность фонового цвета при наведении на активную область страницы */ .leftbar-wrap:hover .active-area { background: #E1E7ED !important; opacity:0.7 !important; } /* делаем подсветку немного ярче при наведении на надпись */ .leftbar-wrap .active-area:hover { } /* центрируем надпись у кнопок */ .bar-desc-niz { top: 26% !important; position: relative; display: inline-block; } .bar-desc-top { top: 10% !important; position: relative; display: inline-block; }

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

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

Мы переходим к следующему способу. Данный вариант уже будет содержать простую кнопку в правой нижней области экрана, нажав на которую, будет произведено перемещение верх страницы.

Реализация кнопки также очень простая и 100% работает на сайте WordPress. По поводу HTML сайта или другого движка сказать не могу. Тестируйте.

Нужно скопировать следующий код со скриптом в самый низ сайта перед закрывающим тегом /

JavaScript

Здравствуйте, уважаемые читатели! Когда-нибудь задумывались над тем, как сделать кнопку Вверх для WordPress? Нет? Очень зря. Ведь это не только красивая, но и очень полезная вещь. Такая кнопка появляется в правом нижнем углу при прокрутке страницы вниз. Нажимаем на нее, и страница плавно возвращается к своему началу. Реализовать подобный эффектный переход наверх в WordPress можно с помощью плагина Dynamic To Top Options. О нем то я сегодня и расскажу.

В можно установить количество анонсов, выводимых на главной и в рубриках блога. На многих блогах, даже 5-7 анонсов хватает, чтобы страницу сделать весьма длинной. И чтобы не раздражать лишний раз читателей и не насиловать колесик мышки, придумана отличная функция — кнопка, после нажатия на которую, страница автоматически прокручивается наверх к своему началу. Просто, эффектно и удобно!

Конечно, кто-то может косо на это посмотреть и сказать, что это необязательно и только добавляет лишний код на страницу. Во многом это так, но не забывайте про юзабилити сайта, про поведенческий фактор и банальное удобство. Этот пустяк может зацепить читателя и оставить его в подписчиках. Но каждый решит для себя сам — устанавливать или нет.

Dynamic To Top Options стандартна. Скачайте последнюю версию , распакуйте и загрузите на сервер в директорию /wp-content/plugins. Активируйте и переходите к настройкам, которые в отличии от большинства других плагин, находятся в разделе «Внешний вид» — «To Top».

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

Первый раздел настроек называется Behavior , что означает свойства.

Scroll time — задает время прокрутки страницы к началу. Измеряется в миллисекундах.

Fade-in distance — расстояние от верхнего края страницы, начиная с которого появляется кнопка «вверх!».

Easing — задает плавность прокрутки. Если не приглядываться, то достаточно трудно почувствовать разницу, особенно если установлено малое значения для времени прокрутки.

Position — позиция кнопки на странице. На выбор 4 позиции:

• top left — левый верхний угол
• top right — правый верхний
• bottom left — нижний левый угол
• bottom right — соответственно нижний правый

Prevent on mobile — отображать или нет кнопку вверх в браузерах мобильный устройств.

Остается только отредактировать внешний вид кнопки в разделе Appearance настроек плагина Dynamic To Top Options. Очень удобно, что все внесенные изменения, можно посмотреть тут же на примере.

Text version — позволяет написать на кнопке текст. После установки галочки, появится следующие поля:

• Button text — текст, используйте простые и понятные слова — «Вверх!» «В начало страницы», «Наверх!», «К началу», «Up!», «Полетели!» и так далее;
• Font size — размер шрифта
• Text color — цвет теста. Нажмите select для наглядного выбора цвета;
• Bold Text — жирное начертание;
• Text shadow — тень от букв;
• Text shadow color — цвет тени.

Top/bottom padding — отступ сверху и снизу от текста или изображения внутри кнопки до ее границ.

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

Официальная страница плагина Dynamic “To Top” Plugin (https://wordpress.org/extend/plugins/dynamic-to-top/ ). Плагин размещает кнопку «Наверх» на сайте. Устанавливается плагин . Язык плагина английский.

Настройки плагина Dynamic “To Top” включают:

• 4 положения кнопки «Наверх» на сайте;
• Настройка внешнего вида (цвет, тень, граница);
• Выбор скорости движения вверх;
• Есть возможность отключения мобильной версии;
• Возможность добавить текс на кнопку.

Скриншоты плагина Dynamic “To Top” Plugin

Официальная страница плагина Scroll To Top (https://wordpress.org/extend/plugins/scrollto-top/ ). Плагин для размещения кнопки «Наверх» на сайте. стандартная. Язык английский.

Из настроек

• 9 Положений кнопки «Наверх» на сайте;
• 4 Стиля кнопки;
• Возможность установить свое изображение для кнопки;
• Замена кнопки текстовой ссылкой с настройкой цвета.

Примечание: Сестра плагина Scroll To Top, плагин кнопка «Вниз» под названием ScrollTo Bottom . Официальная страница плагина: https://wordpress.org/extend/plugins/scrollto-bottom .

Официальная страница плагина Skysa Scroll-to-Top Add (https://wordpress.org/extend/plugins/skysa-scroll-to-top-app/). Плагин для установки панели Skysa внизу страниц сайта. В бесплатной версии в панели устанавливается только стрелка «Наверх» с пользовательской надписью.

В бесплатной версии плагина практически нет настроек. Только бар со стрелкой и пользовательской надписью. Перед покупкой pro версии дают 15-дневный срок для тестирования.

Если вам НЕ нужны красивые и «навороченные» кнопки «Наверх», а достаточно простой надписи, то достаточно вставить нижеследующий код в любое место шаблона своего сайта (например, footer.php), где хотите показать надпись «Наверх» или любую запись понятную пользователю:

Наверх или любой другой Текст

Все! Больше делать ничего не нужно.

Такая надпись «Наверх» не конфликтует с плагинами, ее можно использовать, как дополнительную кнопку «Наверх».

Для дополнения информации, приведу список еще 5 плагинов для реализации на сайте кнопки «Наверх». Поддержка и обновление плагинов постоянно меняется, поэтому говорить о них можно только, на момент использования.

• Scroll to Top Button (https://ru.wordpress.org/plugins/scroll-to-top-button/ )
• Smooth scroll Up (https://ru.wordpress.org/plugins/smooth-scroll-up/ )
• LB Back To Top (https://ru.wordpress.org/plugins/backtop/ )
• WPFront Scroll Top (https://ru.wordpress.org/plugins/wpfront-scroll-top/ )
• M7 Go Top (https://wordpress.org/plugins/m7-go-top/ )

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

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

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

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

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

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

Плагин jQuery Smooth Scroll

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка вверх

Плагин Scroll Back To Top

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

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

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

Здравствуйте, уважаемые читатели.В этой статье я расскажу вам, как установить кнопку “вверх ” для блога WordPress. Сделать эту кнопочку можно двумя способами. Первый способ заключается в установке специального плагина. А второй, в изменении php кода в файлах вашей активной темы.

По большому счету, можно с легкостью обойтись и без этой кнопки. Эта кнопка уже у вас есть на клавиатуре, называется она “home ” . Нажав которую, вы быстро переместитесь на начало страницы.

Многие веб-мастера устанавливают на свой сайт эту кнопку. Кто-то ставит ее для более удобной навигации пользователей по сайту, а для кого-то, это неотъемлемая часть дизайна.

1.Установка кнопки при помощи плагина.

Самый простой способ сделать кнопку вверх, это установить и активировать плагин. Скачать его можно с официального хранилища плагинов на сайте wordpress.org . Я рекомендую качать плагины только оттуда, так у вас будет меньше шансов заразить свой сайт вирусом.

Есть много плагинов которые позволяют добавить кнопку наверх, но я решил в качестве примера выбрать плагин Scroll Back To Top. Скачайте его , загрузите и активируйте.

Плагин имеет целый ряд настроек. Но всё трогать не обязательно. Достаточно настроить расположение и вид кнопки.

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