Давайте мы эти симпатичные фишки и реализуем на нашем сайте.
Я специально не стал дополнять прошлую статью о кнопко скролле, не путаться дабы) ибо в подобных расширениях присутствует момент выбора и настройки jquery библиотек. И когда вы подстраиваете свой сайт, это нужно учитывать, иначе конфликты скриптов и размен геометрики сайта с вашим желанием неизбежен.
Так что… разберём нюансы сегодняшней “плавной темы”, которая позаимствована с длани интернета.
как на сайте сделать кнопку наверх
Нынче я не стану рассказывать, например, о плюсах использования “якоря” в тексте и сайтовой кнопочки “наверх” – они очевидны. И коли вы читаете эту статью, то уже знаете всевозможные положительные моменты этих примочек в SEO организации своего сайта.
Главное, чтобы всё это удобство здорово работало и мы по-возможности тоньше знали как этим пользоваться.
Предполагаю что вы уже припомнили версии подключенных библиотек к вашему сайту.
Нам сегодня потребуется библиотека jquery 1.11.3 и если она уже включена в работу, то дублировать не нужно…
Ведь тут дело вот в чём: определённые библиотеки уже подключены к машинке WordPress по умолчанию – это одно дело. Но есть и другое: большинство блогеров постоянно экспериментирует и улучшает собственный сайт, и, соответственно, что-то и чем-то дополняют.
Поэтому повторюсь: припомните что и каким способом вы подключали к своему сайту и нет ли одноимённой сегодняшней jquery библиотеки. И коли такое подключение есть, повторного делать не стоит. Проверьте файлы header.php
и footer.php
. Ну или откройте исходный код страницы Ctrl+U
или Ctrl+Shift+C
, любопытства ради)
К делу:
js скрипт Кнопка наверх
Предлагаю вот такой скрипт “пружинистой” кнопки наверх. Почему пружинистой..? …а посмотрите здесь на сайте пример работы.
Прописывать его рекомендую перед закрывающим тегом </bоdy>
в файле footer.php
– либо выводите в отдельный файл – так полезнее для скорости загрузки сайта и души блогера. Как правильно зарегистрировать и подключать js, jQuery описано здесь и здесь.
<p id="back-top"><a href="#back-top"></a></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() >= 500)
$(this).fadeIn("slow")
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() <= 1500)
$(scrollDiv).fadeOut("slow")
else $(scrollDiv).fadeIn("slow")
});
$(this).click(function() {
$("html, body").animate({scrollTop: 0}, 1200);
})
}
});
$(function() {
$("#back-top").scrollToTop();
});
</script>
Немного поясню по работе скрипта:
строка 7 – этой величиной можно обеспечить обозначение кнопки (в начальном положении) при заходе на сайт.
строка 11 – место проявления кнопки при прокрутке сайта – дальше/ближе от подвала, например.
16 строка – здесь я самовольно прикрутил регулятор к скрипту “скорость скольжения листка сайта”, которого в первичном варианте почему-то не было отроду и наскрозь.
И отдельно коснёмся строки 2: тут дело вот в чём – библиотеку jquery я подключил по прямой ссылке со стеллажа JS Google ) Во-первых, есть явный плюс: если посетитель вашего сайта перед визитом к вам уже посещал какой-то ресурс, в арсенале которого также работ эта библиотека, – браузер пользователя не будет тратить время на повторную загрузку 95 килобайт. Явное сокращение времени открытия ворот сайта гостю. Во-вторых, считаю, что, некоторое локальное подключение JS нынче не оправдано и логично лишь на локалке. И коли вы заботитесь об обновлениях работы сайта, то целесообразнее подключиться напрямую и не париться слежкой за совремЁнными версиями.
Это моё мнение, но вы можете поступить иначе, а значить и по-иному подключиться: переходите по ссылке прописанной в скрипте; сохраняете файл сценария (можете с любым понятным именем для себя)… либо ступайте ТУДА либо СЮДА Помещайте файл в папку JS-шаблона и, непременно, переуказывайте путь подключения в скрипте выше. Вероятнее всего, нужно будет указать прямой путь (с доменным именем вашего блога).
Решайте.
…реализуем плавно-автоматическое скольжение якоря к месту прописки…
как сделать плавное перемещение якоря по странице блога
следующее наше действо, прикручивание кода плавной прокрутки якоря. Делаем отступ от верхнего скрипта и помещаем туды тот, что показан ниже (всё в одном документе footer.php
).
<!-- якорь - мерно и плавно -->
<script>
$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
e.preventDefault();
});
return false;
});
</script>
Интересная строка за номером 8 – регулировка скорости движения листка страницы.
Теперь важное (для новичков) примечание по поводу создания якоря:
Вся прописка сводится к привычным манипуляциям. Но следует помнить – тем, которые пользуются “якорными перенаправлениями” с одной страницы на другую, что в этом случае наше “плавное” чудо откажется работать.
Вскоре я для этой идеи что-то придумаю и поделюсь
Online консультация по настройкам и созданию сайтов на WordPress
Что ещё… обратите внимание, что подключение нужной нам библиотеки мы производим единожды.
Напоминаю: внимательнее приглядитесь к файлам сайта на предмет подключения одноимённых библиотек. И если библиотека 1.11.3 подключена, повторно этого делать не стоит.
А на сегодня будет достаточно подключить её в верхнем коде “кнопка вверх” , и отработка будет выполняться и в коде “якоря”.
Сохраняем файл футер и открываем документ стилистики style.css
для занесения значений визуального оформления кнопки вверх. Да, если вы сегодня просто меняете свою кнопку на этот вариант из статьи, – предлагаю всего-то сменить имена в ваших селекторах CSS на новые, пример ниже:
#back-top{position:fixed;bottom:47px;right:10px}
#back-top a{background: url(images/verh.png) no-repeat;width:37px;height:32px;display:block;margin-bottom:7px}
#back-top a:hover{opacity:0.5}
…конечно же, абсолютно всё можно перенастроить под себя:
1 – отступы…
2 – путь к кнопке и её географическое оформление… Картинку можете сделать самостоятельно или скачать на свой вкус с инета.
3 – реакция кнопки на прикосновение курсора…
Финал – сохраняйте редакции и проверяйте работоспособность нашего расширения.
А вот ТАК можно проверить наглядно!
Коли возникли конфликты скриптов (попросту, ни кнопка ни якорь не заработали) но вы уверены в своей безошибочной работе “по прописке”… следует ещё раз проверить версии js
библиотек вашего сайта.
Также возможно ознакомиться с прошлой статьёй кнопку наверх с плавным перемещением странички может что изыщете полезное, да и статья проще…
mihalica.ru !
Спасибо!Решим проблемы со своим сайтом.
А вот битую ссылку ненужно вставлять в окошко!
Я её удалил.
Дадите нормальную ссылку, поставлю.