возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено: 2024-02-13 в теме: WordPress без плагинов
Запросто с WordPress создание и продвижение сайтов ATs media

Реализуем плавный скроллинг якоря и эффектную кнопку наверх

Давайте мы эти симпатичные фишки и реализуем на нашем сайте.

 

Я специально не стал дополнять прошлую статью о кнопко скролле, не путаться дабы) ибо в подобных расширениях присутствует момент выбора и настройки 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 – регулировка скорости движения листка страницы.

 

Теперь важное (для новичков) примечание по поводу создания якоря:

 

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

 

 

Вскоре я для этой идеи что-то придумаю и поделюсь

 

 

 


подписка feedburner 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 !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©


  1. Спасибо!Решим проблемы со своим сайтом.

    Ответить - Павел

    • А вот битую ссылку ненужно вставлять в окошко!
      Я её удалил.
      Дадите нормальную ссылку, поставлю.

      Ответить - Михаил