Кнопка – Наверх – на сайт для прокрутки страницы при нажатии

На сайтах часто используется кнопки "наверх", которая, при нажатии, прокручивает страницу в самое начало. Это очень удобно, если страницы сайта достаточно объемные. Подобную кнопку можно установить абсолютно на любой сайт или html страницу. В том числе и на WordPress сайт. Именно об установке кнопки "Наверх" на WordPress сайт мы расскажем далее.

Скрипт кнопки "Наверх"

Чтобы кнопка "Наверх" появилась и начала работать на вашем WordPress сайте, вставьте следующий код в файл footer.php вашего шаблона перед закрывающимся тегом</body>.

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

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

<div id="scroller"><span>наверх</span></div>

После этого на вашем сайте появится надпись Наверх, которая внешне не будет похоже на кнопку. Но это легко устранить, если прописать стили для дива "scroller" в файле style.css. Мы писали о том, как из обычной ссылки сделать кнопку с помощью CSS, поэтому рекомендуем воспользоваться этой инструкцией и оформить кнопку "Наверх" так, как посчитаете нужным.