На верх сайта как Вконтакте

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

Поэтому, для удобства навигации сайта, применяется кнопка прокрутки страницы вверх. Создать такую кнопку можно как без использования JavaScript (только с помощью CSS), так и с ним. Рассмотрим самые простые реализации этих способов.

Кнопка наверх: HTML+CSS

Преимущество данного способа — простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).

Как сделать кнопку Наверх (Вверх) на сайте, как Вконтакте + плавный скролл. HTML + CSS + jQuery

Сначала нужно создать ссылку ‘#’, а затем оформить её так, как нам нужно:

Кнопка наверх с помощью CSS — «Нубекс» .topNubex Вверх

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

Кнопка наверх: JavaScript

Приведенный ниже способ использует библиотеку JQuery. Он прост в использовании и позволяет сделать прокрутку страницы плавной.

Кнопка «Вверх» при помощи JavaScript — «Нубекс» #topNubex $(function() < $(window).scroll(function() < if($(this).scrollTop() != 0) < $(‘#topNubex’).fadeIn(); >else < $(‘#topNubex’).fadeOut(); >>); $(‘#topNubex’).click(function() < $(‘body,html’).animate(,700); >); >);

В этом примере в качестве фона кнопки используется картинка. Можно настроить отображение кнопки при помощи CSS-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки «Наверх» на сайт.

Смотрите также:

• Как поставить горячую клавишу на ссылку
• Как сделать кликабельный телефон на сайте
• Как сделать кнопку «Добавить в избранное»
• Кнопка HTML

Источник: nubex.ru

Кнопка вверх как вконтакте wordpress

Подробные видеоинструкции WordPress на тему: «Кнопка вверх как вконтакте wordpress»:

Кнопка Наверх как во Вконтакте на WordPress

Как сделать кнопку вверх на WordPress

Как добавить кнопку Наверх на WordPress-сайт?

Как установить кнопку вверх в статье на сайте? | WordPress плагины

Источник: wordpressunik.ru

Как добавить кнопку «Вверх» на сайт с WordPress

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

В каких случаях стоит использовать кнопку прокрутки и как добавить такой функционал на сайт с WordPress? Поговорим об этом в сегодняшней статье.

Для чего нужна кнопка «Вверх»

Кнопка «Вверх» – это отличный способ вернуть пользователя в начало веб-страницы. Такой функционал часто используется на длинных страницах, где скролить до начала страницы попросту неудобно.

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

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Какой должна быть кнопка «Наверх»

Перед тем как перейти к реализации кнопки «Вверх», рекомендую ознакомиться с некоторыми правилами, которые помогут вам избежать ошибок:

• Не используйте кнопку «Вверх», если длина вашего сайта меньше 4 экранов. Нет необходимости добавлять кнопку, когда у вас простой сайт-визитка – он довольно маленький, поэтому пользователю и так будет удобно добраться до первого экрана.
• Старайтесь расположить кнопку «Наверх» в правом нижнем углу. Если в этой области кнопка будет перекрывать виджет либо мешать чему-то другому, то можно ее разместить в левой части. Но лучше сделать так, чтобы она была реализована справа, так как пользователь обычно старается найти ее в той стороне.
• Используйте графическую кнопку прокрутки, не стоит давать кнопке название «Наверх» или «Вернуться», лучше вставить простую иконку стрелки вверх, подходящую под дизайн вашего сайта.
• Кнопка должна быть контрастной относительно фона – она должна выделяться и быть заметна.
• Добавьте плавную прокрутку до начала страницы. Если перемещение по сайту будет мгновенным, то пользователь может и не понять, что произошло. А когда добавлен плавный скрол, тогда будет не только понятно, но и приятно перемещаться в начало сайта. Кроме того, если пользователю нужно будет остановиться на каком-либо разделе, то он всегда это сможет сделать во время автоматической прокрутки вверх.

Вывод: кнопку «Вверх» лучше всего использовать в нижнем правом углу, она должна быть заметна и удобна, прокрутка должна быть плавной, не мгновенной.

Альтернативы кнопкам прокрутки

Если кнопка «Наверх» не вписывается в дизайн сайта либо вы не хотите ее использовать по каким-то иным причинам, то можно попробовать другие варианты удобного перемещения по странице:

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

Лучшие плагины для создания кнопки «Наверх»

Для того чтобы добавить кнопку «Вверх» на сайт с WordPress, достаточно установить и активировать специальный плагин. Как правило, дополнительные настройки не требуются, но во многих инструментах можно кастомизировать кнопку под себя и вводить дополнительный функционал. Например, можно сделать так, чтобы кнопка появлялась в определенный момент через N пикселей.

О том, что это за плагины и каким функционалом они обладают, поговорим далее.

jQuery Smooth Scroll

jQuery Smooth Scroll – это удобный и простой плагин для активации кнопки «Вверх». Чтобы добавить на ресурс такую кнопку, достаточно скачать и установить плагин. Сразу после активации сбоку страниц появляется небольшая плавающая кнопка, которая появляется после некоторой прокрутки и автоматически скрывается, когда пользователь возвращается в начало страницы.

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

Особенности:

• плавная прокрутка;
• кнопка расположена в правой части экрана;
• дополнительные настройки проводятся с помощью CSS/JS.

Стоимость: бесплатно

Ссылка на скачивание: jQuery Smooth Scroll

Smooth Scroll Up

Smooth Scroll Up – это популярный и функциональный плагин, позволяющий легко поставить кнопку возвращения в начало страницы.

Особенности:

• доступны разные варианты кнопки «Вверх»: текст со ссылкой, иконка, изображение;
• можно добавить собственный комментарий рядом с кнопкой;
• кнопку можно разместить не только справа, но и слева или центру;
• кнопка прокрутки может быть отображена не на всех страницах сайта;
• работает в мобильной версии;
• плавная прокрутка до начала страницы;
• есть анимации для прокруток: slide и fade, без анимационного эффекта;
• можно добавить собственные CSS-стили.

Стоимость: бесплатно

Ссылка на скачивание: Smooth Scroll Up

WPFront Scroll Top