Как сделать на сайте кнопку наверх с плавным перемещением странички

Сегодня мы с вами установим кнопку “наверх” (думаю, кому-то пригодится из наших читателей). Признаюсь, давно не устанавливал эту кнопку, пришлось освежить в памяти: короче, подобрал, протестировал и даю рабочие варианты кнопок наверх без плагина(в мануале вы отыщете всё необходимое): плагины слишком тяжелы, а поэтому мы их по возможности не используем…

 

А и без них многое могём: требуется кнопка “наверх” – сегодня она у вас будет! Симпатичная и полностью подстраиваемая под ваш блог на WordPress.

 

Приступим: для начала определитесь как станете реализовывать идею вашей кнопочки вверх!? Предлагаю три варианта:

 

 

 

 

 

 

оптимальная установка кнопки скроллинга наверх без плагина

 

 

 

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

 

Я так не делаю, а располагаю всё внутри шаблона в соответствующих директориях. Для меня так логичнее. А посему в статье предлагаю именно этот вариант. Иной вывод кнопки-вверх делается чуть иначе, подробности ниже…

 

 

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

 

 

В вашем шаблоне должна быть папка js (мы её создавали для реализации дополнительных кнопок в визуальный редактор WordPress TinyMCE ) Хотя сейчас большинство шаблонов пишется, конечно же, с папкой js (скажем так). Но если у вас её нет – создайте в корне шаблона и дайте имя js.

 

 

 

Шаг первый:

 

 

…в папку js помещаем следующий документ. Этот файл (в купе с jquery-1.7.1.min.js) прячет кнопку “наверх” когда пользователь находится в самом верху сайта, и показывает её когда тот прокручивает страничку книзу…

 

…путь можете выстроить следующим образом:

ваш_домен.ru/wp-content/themes/ваша_тема/js/verh.js

 

 

 

 

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

 

 

 

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

 

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

 

Вот содержимое файла verh.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")})}});

 

 

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

 

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

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

 

 

! но тогда вы будете зависеть от Гугл-а-а! …но от кого-то зависеть – плохо!?. Я подключаю библиотеку со своего сайта. А касаемо обновления – то их можно получить, загрузив через какое-то время новый скрипт внутрь документа 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 можно так:

 

переходим по ссылке https://code.jquery.com/jquery/ и…

 

 

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

 

С этим всё!

 

 

Помещаем в файл footer.php следующий скрипт: он подключит файл verh.js и выведет на картинку сайта иконку самой кнопочки. Прописываем его прямо перед закрывающим тегом </body> – фото.

 

<a id="verh" href="#" title="Вернуться наверх"><img src="/wp-content/themes/ваша_тема/images/verh.png" class="buttonup" /></a><script type="text/javascript" src="/wp-content/themes/ваша_тема/js/verh.js"></script><script type="text/javascript">// <![CDATA[
$(function() {      $("#verh").scrollToTop();      });
// ]]></script>

 

 

 

 

 

 

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

 

 

Но коли хотите использовать подключение кнопки вне шаблона (выводите все эти необходимые для кнопки файлы в корень вашего сайта, меняя соответственно пути подключения кнопки ВВЕРХ в новых файлах.

И, конечно же, говорю всякий раз: заведите какой-то документ «запоминалку» всех совершаемых эксов с блогом. Пригодится:).

 

 

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

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

 

<script type="text/javascript" src="/wp-content/themes/ваша_тема/js/jquery-1.7.1.min.js"></script>

 

 

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

 

 

 

 

 

 

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

 

#verh {
margin:0px 57px 150px;/*расположение кнопки*/
position:fixed; /*фиксирование кнопки*/
bottom:30px;
right:2px;
text-align:center;
text-decoration:none;
cursor:pointer;/*ладошка при наведении курсора*/
}

 

 

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

 

.buttonup{
opacity:0.8;/*степень прозрачности*/
}

 

 

 

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

 

 

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

 

 

 

В данном скрипте можно оставить всё как есть, т.е подгружать из самой библиотеки ГуглЪ.

 

 

<p id="back-top"><a href="#top"></a></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
});
</script>

 

 

нотация:

 

1100 – расстояние открутки вниз, после которого появляется кнопочка

 

400 – скорость прокрутки.

 

Но, что важно!

 

А можно и загрузить файл на сервер (в папку js в корне вашей темы) и тогда вы не будете зависеть от сторонних подгрузок. Это, естественно, более правильно!

 

 

Переходите… скачивайте… ТУТ (обратите внимание, вес всего-то 26кб).

 

И после заливки файла в корень вашей темы, заместо строки (в скрипте выше), пропишите эту:

 

 

<script type="text/javascript" src="/wp-content/themes/ваша_тема/js/jquery.min.js"></script>
<script>

 

 

 

Ну и как обычно, в файл CSS (style.css) пропишите следующий дизайнерский скрипт самой кнопочки вверх:

 

 

#back-top {
position: fixed;
bottom: 60px;
right: 3%;
}
#back-top a {
background: url(images/verh.png) no-repeat;
width: 60px;
height: 60px;
display: block;
margin-bottom: 7px;
}
#back-top a:hover {opacity:0.5}

 

 

Путь к кнопке и её имя прописывайте свои.

 

 

наилегчайший способ реализации в блоге кнопочки наверх

 

 

 

Способ три:

 

…таким способом (очень простым и лёгким) можно реализовать простенькую кнопочку в блоге на вордпресс: клик… и вы молниеносно “перемещаетесь” кверху странички.

 

Тут вся реализация идеи сводится к тому, что нужно открыть файл footer.php и прописать строку приведённую ниже.

 

Вся сложность в том, что вам лишь предстоит выбрать место помещения скриптовой строки в строках файла футер пчп, от этого будет зависеть географическое размещение кнопки в футере сайта (вот такой каламбур). Обратите внимание: в этом случае я поместил картинку в корень сайта.

И, как вы поняли, этот способ не нуждается более ни в каких скриптокодах).

 

<a href="#" title="Вернуться наверх" class="buttonup"><img src="https://mihalica.ru/verh.png"></a>

 

 

(фотку кликайте…))

 

 

 

 

 

 

 

Недостатки — резкое перемещение и, как говорят, «не круто».

 

Достоинство: лёгкость реализации. И лёгкость же использования (без библиотек)).

 

 

 

 

 

 

Мы идём вперёд, а не назад, вроде бы) а значит нужно помнить, что множество удобств навигации и т.п. должен включать в свой инструментарий браузер: мобильный или десктопный.

Посему админу важно не пересолить с прибабахами!

 

 

 

 

 

 

Выбор за вами товарищ админ! ))

 

 

 

 

…а впереди у нас с вами ещё множество утончённых) способов настройки нашего блога. А пока рекомендую ознакомиться с другими вариантами подключения всевозможного скрипта – я использую у себя такую кнопочку – плавный скроллинг якоря и пружинистой кнопки наверх

 

 

Online консультация по настройкам и созданию сайтов на WordPress