Кнопка прокрутки вверх страницы на сайт WordPress без плагина

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

jQuery скрипт прокрутки страницы вверх

Для кнопки вверх, потребуется совсем небольшой скрипт, который нужно подключить к сайту и сделать это можно несколькими способами. Я покажу вам каждый из них, а вы уже решите, какой из них лучше использовать. Как прикрутить jQuery написано здесь. Вот сам код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

Этот кусок кода нужно вставить на перед закрывающим тегом head. Другой вариант — вынести этот сценарий в отдельный файл, с любым названием, к примеру: scroll-to-top.js. предварительно удалив 1-ую и 14-ю строчки. А затем подключить его на сайте перед тем же тегом вот таким образом, прописав в src путь до файла:

<script type="text/javascript" src="./js/scroll-to-top.js"></script>

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

Подключаем картинку со стрелкой вверх

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

CSS код для кнопки вверх

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

1
2
3
4
5
6
7
8
9
10
11

#scrolling {
    position: fixed;
    display: none;
    left: 16px;
    background: url(images/scrolling.png)0 51px;
    width: 51px;
    height: 51px;
    left: 90%;
    bottom: 10px;
}
#scrolling:hover {background-position: 0 -1px;}

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

Выводим кнопку на страницу средствами HTML

Остался заключительный этап создания кнопки верх. К коде нужно прописать идентификатор scrolling. Поместить его желательно в футер перед закрывающим тегом body.

<a id="scrolling" href=""></a>

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

СКАЧАТЬ