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

Кнока «вверх» для Joomla


CMS Joomla также поддерживает установку плагинов, как и WordPress. Наиболее удачным вариантом кнопки «вверх» для сайта на Joomla 3 является расширение под названием Top of the Page.

В данной CMS любой плагин может быть установлен через «Менеджер расширений». Для этого необходимо:

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

Теперь необходимо его активировать в «Менеджере плагинов». Для этого необходимо перейти в данный раздел, найти плагин и переключить его состояние на «включено».

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

Top of the Page имеет следующий функционал:

  • Run in/ administrator – включение опции не только на интернет-ресурсе, но и в самой панели CMS Joomla.
  • Button Reveal Position – сколько пикселей должен отмотать пользователь для того, чтобы кнопка «вверх» появилась.
  • Omit Button Text – наличие текста на кнопке.
  • Always at Top – страница сайта все время будет отображаться с ее начала. При использовании «якорей» для прокрутки в определенное место на странице данную опцию не нужно активировать.
  • Smooth Scroll – делает прокрутку страницы более плавной.
  • Scroll Duration – время, через которое страница полностью переместится в начало.
  • Scroll Transition – добавляет прокрутке больших визуальных эффектов.
  • Transition Easing – «ослабление» перемещения к верху страницы.
  • Link Location – местоположение иконки. По стандарту, кнопка располагается в правом нижнем углу.
  • Use Styles – индивидуальный стиль кнопки, который можно задать в поле, расположенном ниже. Если переключено на отрицательное значение, то все параметры стилей будут браться из активной темы сайта.
  • Link Style – поле для вписывания своих параметров стиля кнопки.

Для самостоятельной настройки стиля кнопки «вверх» необходимо обладать хотя бы минимальными знаниями CCS. В противном случае стоит переключить значение предпоследнего параметра на «Нет».

Еще один важный нюанс заключается в том, что обычная надпись на иконке содержит англоязычный текст: Return to Top. На русскоязычном сайте подобный текст присутствовать не может, поэтому стоит просто отключить его в параметрах плагина либо изменить на русский.

Для изменения данной надписи необходимо зайти на сервер сайта при помощи FTP или встроенного в хостинге файлового менеджера. Далее в директории «/administrator/language/en-GB/» нужно найти файл под названием «en-GB.plg_system_topofthepage.ini».

Перед изменением текста стоит изменить кодировку данного документа на UTF-8. Это позволит сделать нормальное отображение русских букв.

Далее находим такую строчку:

» PLG_SYS_TOPOFTHEPAGE_GOTOTOP=»Return to Top» «

и изменяем фразу в кавычках на русскоязычную. Можно использовать такие фразы, как «Вверх!», «В начало!» или «Наверх!».

В конце потребуется сохранить измененный файл и проверить наличие кнопки «вверх» для сайта на Joomla.

набор для сайта кнопочка наверх

…имя документа — обратите внимание, файл с расширением —. И как вы догадались, это ничто иное как JavaScript

Значит так: можете всё это создавать сами (практики ради), а можете и просто скачать набор для кнопочки наверх ТУТ, и вам останется только разложить всю документацию в соответствующие разделы… И, конечно же, — поменять имена в некоторых строках.

Вот содержимое файла

Далее необходимо подключить библиотеку jQuery (это тем у кого она не подключена).

Здесь выбирайте способ: можно указать адреса библиотек Google, чтобы подгружать оттуда…

! но тогда вы будете зависеть от Гугл-а-а! …но от кого-то зависеть — плохо!?. Я подключаю библиотеку со своего сайта. А касаемо обновления — то их можно получить, загрузив через какое-то время новый скрипт внутрь документа jquery-1.7.1.min.js или поправить пути прописанных строчек (коли поменяются символы /например, будет вместо 1.7.1 что-нибуди типа 1.7.2…/) Хотя можно найти прямо jquery-1.7.2.min.js но она весит 250кб, а наша всего 95. Тем паче этот файл библиотеки нам нужен только для кнопочки. Самое то!

Скачать файл  можно так:

(выбираете… скачиваете… /в своём браузере кликаете в меню «файл» и сохраняете/) — потом jquery-1.7.1.min.js помещаем в папку js.

С этим всё!

Помещаем в файл следующий скрипт: он подключит файл verh.js и выведет на картинку сайта иконку самой кнопочки. Прописываем его прямо перед закрывающим тегом — фото.

Ну и теперь же закинем картинку кнопки в папку — имя кнопки: . Для интереса можете проверить в скриптах как всё это подключается: пути-адреса и т.п.

Ну и финальное — остаётся подключить в файле саму библиотеку. Итак:

открываем… и прямо перед закрывающим тегом прописываем строчку показанную ниже:

Должно получиться приблизительно как на фото (картинку кликать):

И — финал: скрипт css, который нужно поместить в самый конец файла .


И — прозрачность иконки (сработает при прикосновении)…

А вообще, смотрите по правильной отработке библиотек jquery вашей темой… и коли что-то не пшоло, меняйте версии подключаемых библтотек (но это если САМ скрипт у вас не был подключен по умолчанию) —

…сейчас (на момент написания статьи) вовсю используют библиотеку 

…посему предлагаю новый

Кнопка плавной прокрутки вверх при помощи JQuery

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

Мне эта кнопка нравится тем, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты.

Теперь разберемся, что нужно сделать для подключения кнопки к сайту

Изображение:

Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это: icon_top.png

HTML код:

Для вызова кнопки после основного контента страницы или перед тегом </body> разместите следующий HTML код:

CSS стили:

При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и  50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.

JQuery:

Для начала подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами <head>…</head>? вставляем следующее:

Затем сразу после подключения библиотеки необходимо расположить следующий  код JQuery:

Первый ScrollTop — определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение. 

Как вы видите есть еще два параметра — 0 — значит страница будет прокручена вверх до самого начала до нулевого пикселя, а 600 — это скорость анимации в миллисекундах.

Кнопка простая, без эффектов

<style>
.iptotop {
position: fixed;
right: 20px;
bottom: 20px;
width: 48px;
height: 48px;
display: block;
background: url(https://2.bp.blogspot.com/-tS4a6of-j5Q/UfZ25YMVqiI/AAAAAAAAFm0/aesi1Ans5oU/s1600/top.png) 0 0 no-repeat;
z-index: 99999999;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out
}
.iptotop.hidden {
bottom: -100px
}
</style>
<a class=' iptotop' href='#'>
<span></span>
</a>

выделено красным

1 2 3 4 5 6 7 8 9

</div></footer>

Вариант в сплавным скроллингом, на основе jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<style> #toTop { position: fixed; bottom: 20px; right: 2px; background: none; cursor: pointer;} </style> <a href=»#» id=»toTop»><img src=’ https://2.bp.blogspot.com/-tS4a6of-j5Q/UfZ25YMVqiI/AAAAAAAAFm0/aesi1Ans5oU/s1600/top.png’ border=»0″ align=»absmiddle» /></a> <script src=»https://dl.dropboxusercontent.com/s/ewiuc3lc8dkzx6h/toTop.js» type=»text/javascript»></script> <script type=»text/javascript»> $(function() { $(«#toTop»).scrollToTop(); }); </script> красный текст.toTop.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")})}});

toTop.js

Для первых двух способов

1 шаг

background: url("https://2.bp.blogspot.com/-1sdAwGvGOuk/UfZ235yA_hI/AAAAAAAAFms/2-7YReB_pcM/s1600/top_hov.png") 0 0 no-repeat; 

2 шаг

background: #ffffff;

3 шаг

color: #000;

4 шаг

<a class=' iptotop' href='#'>
<span></span>
</a>
<a class=' iptotop' href='#'>
<span>Наверх</span>
</a>

Теперь для текстовой кнопки , с эффектом плавного скроллинга:

#toTop { 
width: 89px;
height: 24px;
background: #D9DAEE;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: fixed;
bottom: 30px;
right: 2px;
text-align: center;
text-decoration: none;
font-size: 12pt;
color: #1A2534;
cursor: pointer;}
<a href="#" id="toTop"><img src=' https://2.bp.blogspot.com/-tS4a6of-j5Q/UfZ25YMVqiI/AAAAAAAAFm0/aesi1Ans5oU/s1600/top.png' border="0" align="absmiddle" /></a> 
 <a href="#" id="toTop">Наверх</a>

Изображение кнопки

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

Чтобы улучшить вид кнопки, необходимо сделать некоторые доработки, а именно сделать спрайт, позволяющий на основе CSS объединить фоновые картинки, тем самым сотворив из них анимацию.

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

Для начала работы в появившемся окне редактора нужно выбрать поле «Загрузить изображение с компьютера». В качестве примера возьмем изображение ракеты.

Если габариты выбранной иконки слишком велики, то потребуется сделать небольшую корректировку размеров. Для этого необходимо перейти в верхнее меню и выбрать поле «Редактировать», а после «Free transform…»

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

Следующее действие – создание копии слоя.

Теперь необходимо переместить картинку ракеты из нового слоя немного вверх. Для этого будет удобно использовать инструмент перемещения, который располагается во второй колонке левого меню, и стрелку «вверх» на клавиатуре.

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


Последний штрих – удаление лишнего пространства вокруг двух картинок. Для этого выбираем пункт «Обрезка» из левого меню и выделяем в прямоугольник лишь две ракеты. Для совершения обрезки нажимается клавиша Enter.

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

Для сохранения нужно нажать на «Файл» — «Сохранить», где в левом пункте «Мой компьютер» записываем имя изображения (только английская раскладка), выбираем формат (в данном случае – PNG) и нажимаем кнопку «Да».

Простая кнопка «Наверх» без JavaScript

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

Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:

Как вы видите ссылке задан класс .topbutton используя который, при помощи CSS, вы можете придать ссылке любой, необходимый вам вид, например вид той же кнопки.

Пример CSS кода:

Недостатки:

— Кнопки сделанные с применением JavaScript могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.

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

Плюсы данного вида кнопки:

+ Для работы кнопки не нужно задействовать скрипты и большие, по объему, библиотеки. И это очень большой плюс.

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

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

  • Кнопка не будет постоянно маячить перед глазами, а появится только тогда, когда посетитель пролистает страницу вниз;
  • Эффект возвращения наверх страницы будет плавным, что выглядит стильно;
  • Кроме того, наша кнопка будет меняться при наведении курсора (менять цвет или яркость).

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

В целом, процесс создания такой кнопки чуть-чуть сложнее, но разобраться с ним может каждый. Делается все в 2 этапа:

1. Подключение библиотеки jQuery

Если вы используете WordPress или другую стандартную CMS, то эта библиотека, скорее всего, подключена по умолчанию. В таком случае, этот пункт вы можете пропустить.

Для подключения библиотеки jQuery, вам нужно прописать в разделе <head></head> вашего сайта следующую строку:

<script type="text/javascript" src="https://yastatic.net/jquery/2.1.3/jquery.min.js"></script>

2. Подключение скрипта, выводящего кнопку

Код скрипта можно вставить двумя способами:

  • либо поместить его целиком между тегами <head></head>,
  • либо разместив скрипт в отдельном фале, а в коде страницы прописать его подключение.

Первый вариант проще, второй, на мой взгляд, удобнее.

Вот сам скрипт (автор Тимур Камаев wp-kama.ru):

<script type="text/javascript">
jQuery(document).ready(function($){
	$('<style>'+
		'.scrollTop{ display:none; z-index:9999; position:fixed;'+
			'bottom:20px; left:90%; width:88px; height:125px;'+
			'background:url(https://biznessystem.ru/img/arrow.png) 0 0 no-repeat; }' +
		'.scrollTop:hover{ background-position:0 -133px;}'
	+'</style>').appendTo('body');
	var
	speed = 550,
	$scrollTop = $('<a href="#" class="scrollTop">').appendTo('body');		
	$scrollTop.click(function(e){
		e.preventDefault();
		$( 'html:not(:animated),body:not(:animated)' ).animate({ scrollTop: 0}, speed );
	});

	//появление
	function show_scrollTop(){
		( $(window).scrollTop() > 330 ) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700);
	}
	$(window).scroll( function(){ show_scrollTop(); } );
	show_scrollTop();
});
</script>

Замените в скрипте ссылку https://biznessystem.ru/img/arrow.png на ту, где будет храниться ваша картинка.

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

Я назвал файл buttonup.js. Для его подключения в заголовке сайта прописываем вот такую строчку:

<script type="text/javascript" src="https://путь к файлу/buttonup.js">

Вместо «путь к файлу» прописываете адрес, где лежит ваш файл со скриптом.

Картинка для кнопки

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

Заданные цифры приведены для картинки размером 88 на 250 пикселей (каждая стрелка сделана по 125 пикселей в высоту). Если вы будете использовать другое изображение, то изменяете в коде значения width и height на свои.

Значение background-position – это смещение картинки, его делаете чуть больше половины всей высоты изображения.

Bottom – это отступ от нижнего края экрана. Left – отступ от левого края экрана, здесь он задан в процентах, а можно задать в пикселях, как это было в примере с HTML. Там параметр right (отступ справа) был задан в пикселях.

Код можно упростить, если удалить из него вот эту строку:

+ '.scrollTop:hover{ background-position:0 -133px;}'

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

Несколько вариантов стрелок я сделал, а в интернете вы можете отыскать много готовых.


Как видите, создать красивый сайт самому несложно. На этом на сегодня все.

Установка кнопки «вверх» на любой сайт

Действительно, добавить данный скрипт можно без проблем на любой сайт или любую CMS, да что там – хоть на чистый html хоумпейдж. Самое главное и единственное условие – у вас должна быть подключена jQuery библиотека.

Оригиналов исходного кода Яндекса я не сохранил, так как при добавлении на блог я сразу менял некоторые стили и настройки. Но поверьте, в процессе интеграции все стало только лучше!Итак, приступим к установке:

Шаг 1. Добавляем JavaScript в шаблон сайта, перед закрывающим тегом </head>

<script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > ) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop }, 400); return false;});
});</script>

Например, для WordPress надо будет редактировать файл шаблона header.php, а в DLE необходимо будет добавлять код в шаблон main.tpl.

Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом </body>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх<span><div>

Опять же, в WordPres надо редактировать файл footer.php, а для DLE снова main.tpl.

Шаг 3

Добавляем CSS-стили блока и кнопки вверх в файл style.css (название файла style.css у вас может быть и другим, но это не важно, добавьте код в любой файл стилей, который подключается к сайту)

.b-top {z-index2600;positionfixed;left;bottom90px;width34%;margin-left50%;opacity 0.5;filteralpha(opacity=50);}
.b-tophover {opacity1;filteralpha(opacity=100);cursorpointer;}
.b-top-but {z-index2600;positionabsolute;displayblock;left56px;bottom;margin   100%;padding32px 12px 4px;
colorwhite;background#D8D5C2 url(https://alaev.info/wp-content/plugins/goupbutt/b-j-top.png) no-repeat 50% 11px;border-radius7px;}

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

Что тут можно настроить и изменить под себя:

  • bottom:90px; – смещение блока с кнопкой относительно низа страницы;
  • width:34%;margin-left:50%; — вот с этими параметрами вам придется поколдовать, т.к. четкой инструкции тут быть не может. Данные значения я выявил экспериментально, проверяя положение кнопки на разных разрешениях экрана именно для моего шаблона на блоге. Чего и вам рекомендую;
  • padding:32px 12px 4px; — с помощью этих значений вы можете регулировать размер блока с кнопкой, управляя отступами относительно надписи «вверх». 32px – отступ сверху, 12px – отступы слева и справа, 4px – отступ снизу;
  • color:white; — цвет надписи «вверх»;
  • border-radius:7px; — это css3 стиль, отвечающий за закругление краев блока.

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

Плагины — кнопка вверх для WordPress

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

  • Устанавливаем и активируем плагин;
  • Настраиваем кнопку.

Первым у нас пойдёт:

Простой плагин jQuery Smooth Scroll

Плагин jQuery Smooth Scroll

Модуль для плавной прокрутки обратно вверх. Данный плагин автоматически добавляет кнопку вверх (стрелка), после установки и активации модуля.  Кнопка вверх появится в правом нижнем углу сайта. Как говорится, установил и забыл.  Установили плагин уже более 50 700 раз. Все файлы CSS и JS сжимаются, чтобы получить высокий балл в Google Page Speed.

А вот так выглядит наша кнопочка:

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

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

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

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

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

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

Плагин WPFront Scroll Top

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

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

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

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

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

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

Кнопка вверх

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

Плагин Scroll Back To Top

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

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

И собственно выбор самой кнопки:

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

А вот пример кнопочек на сайте WordPress стрелка вверх:

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

И ещё, пара.

Simple Scroll to Top Button

Кнопка Scroll to Top для ВордПресс

Простой в использовании, с интуитивно понятным интерфейсом, плагин WordPress, который дает вам возможность легко и безопасно добавить кнопку «Scroll to Top» на ваш сайт WordPress. Кнопка «Scroll to Top» появляется в правом нижнем углу веб-сайта, когда посетители прокручивают страницу.

Этот плагин дает вам более полный контроль над кнопкой вверх, её можно настроить на странице настроек модуля. Вы можете выбрать, где будет отображаться кнопка, например, домашняя страница или все страницы. Вы можете настроить стиль кнопки. Plagin переведён на русский язык. Разберётесь с лёгкостью:

Разделы Настройки и Предварительный просмотр

Совместим со всеми темами WordPress. Просто установи, настрой и начинай наслаждаться своей модной кнопкой «Scroll to Top». Плавающая кнопка на сайте сбоку ВордПресс:

Стрелка наверх на сайте

А вот есть и такие: кнопки плавной прокрутки вверх / вниз

Smooth Scroll Page Up/Down Buttons

Кнопки плавной прокрутки вверх / вниз

Если одной стрелки вам мало, то можно установить две: вверх и вниз. Плагин Smooth Page Scroll Up / Down Buttons для WordPress добавляет кнопки на каждую страницу вашего сайта, которые можно использовать для плавной прокрутки вверх или вниз. Это может быть особенно удобно для страниц с большим количеством текста / контента. Есть станицы с настройками. Например, расположение Buttons, используйте любой из 4 шаблонов макета. Установите скорость, с которой страницы должны прокручиваться:

Экран настроек расположения Buttons

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок


С этим читают