amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}
Categories: Плагины

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

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

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

Smooth Scroll Page Up/Down Buttons

Smooth Scroll Page Up/Down Buttons – за этим длинным нерусским названием кроется тот самый плагин, который создаст нам на сайте продвинутую кнопку наверх.

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

Во-вторых, как понятно из того же названия, это кнопка может отправлять ещё и вниз, что удобно для того, чтобы быстро переместиться к футеру.

И есть у этого плагина одно достоинство, которое отличает его от остальных. Но перед этим рассмотрим, как его настраивать. Установка плагина обыкновенна. Активируем и переходим в пункт «Настройки» и подпункт «Smooth Scroll Page Up/Down Buttons». Видим, что настроек тут минимум.

  • Include ‘back to top’ button. Это как раз и есть та особая функция кнопки наверх от этого плагина. Если поставить тут галочку, то появится ещё одна кнопочка со стрелкой, при нажатии на которую произойдёт прокрутка на один экран вверх или вниз. Это очень удобно при чтении материала, если он большой, особенно тем, кто смотрит с ноутбука с тачпадом, который не поддерживает скроллинг – крутить колёсико не надо, и нажимать на стрелки клавиатуры, которые прокручивают не точно и резко, тоже не надо. Нужно просто кликнуть на эту дополнительно кнопку и экран плавно и красиво прокрутится в нужное место, чтобы продолжить чтение. Отличный элемент для улучшения поведенческих факторов. Если вам интересно, как ещё можно их улучшить, почитайте тут.
  • Тут выбираем, где будет находиться кнопка наверх и вниз. Есть четыре разнообразных варианта, и можно будет подобрать самый гармоничный.
  • Scrolling distance. Можно настроить насколько высоко будет поднимать кнопка наверх. Указывает в процентах: 100% – в самое начало, 50% вполовину экрана, если написать 25%, то для того, чтобы добраться до начала, нужно будет кликнуть 4 раза на эту кнопку. При включённой Include ‘back to top’ button лучше здесь написать 100%.
  • Scrolling speed. Скорость прокрутки. Указывается в миллисекундах. И при необходимости можно сделать прокрутку кнопки наверх более плавной или более резкой.
Адель Гадельшин

View Comments

  • Функция несомненно классная и нужная. Сделала всё правильно. Там и настраивать то нечего,всё понятно. Пробовала установить на два сайта, не работает! Странно.

  • Тем не менее эта функция весьма полезна. Особенно когда статья большая. Хочу тоже установить такой плагин.

Recent Posts

Что такое отказы на сайте, почему они происходят, как их уменьшить

Отказы на сайте - это процент посетителей, которые покидают сайт после просмотра только одной страницы.…

8 месяцев ago

Как сделать запуск инфопродукта

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

8 месяцев ago

Как вебмастеру юридически обезопасить себя

Ведение сайта - это не только подержание его работоспособности и наполнение контентом. В последние годы…

8 месяцев ago

Папки WordPress: значение папок /wp-admin, /wp-includes и /wp-content

WordPress - это популярная система управления контентом (CMS), которая позволяет создавать и управлять веб-сайтами различной…

8 месяцев ago

Что такое сертификат Let’s Encrypt и стоит ли его устанавливать

Сертификат Let’s Encrypt - это бесплатный и открытый сертификат SSL/TLS, который позволяет защитить веб-сайт от…

8 месяцев ago

Защита WordPress от вирусов

WordPress - это одна из самых популярных систем управления контентом в мире, которая используется миллионами…

9 месяцев ago