студия занимательная МИХАЛИКА
! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !

издатель:   в теме: В теме: Без плагинов
студия занимательная МИХАЛИКА

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

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

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

Так что… разберём нюансы сегодняшней «плавной темы», которая позаимствована с длани инета.

 


как на сайте сделать кнопку наверх

 

 

 

Нынче я не стану рассказывать, например, о плюсах использования «якоря» в тексте и сайтовой кнопочки «наверх» — они очевидны. И коли вы читаете эту статью, то уже знаете всевозможные положительные моменты этих примочек в SEO организации своего сайта.

Главное, чтобы всё это удобство здорово работало и мы по-возможности тоньше знали как этим пользоваться.

 

Предполагаю что вы уже припомнили версии подключенных библиотек к вашему сайту.

Нам сегодня потребуется  jquery 1.11.3 и если она уже включена в работу, то дублировать не нужно…

 

Ведь тут дело вот в чём: определённые библиотеки уже подключены к машинке WordPress по умолчанию — это одно дело. Но есть и другое: большинство блогеров постоянно экспериментирует и улучшает собственный сайт, и, соответственно, что-то и чем-то дополняют.

Поэтому повторюсь: припомните что и каким способом вы подключали к своему сайту и нет ли одноимённой сегодняшней jquery библиотеки. И коли такое подключение есть, повторного делать не стоит. Проверьте файлы header.php и footer.php. Ну или откройте исходный код страницы Ctrl+U или Ctrl+Shift+C, любопытства ради)

 

 

К делу:

 

Предлагаю вот такой скрипт «пружинистой» кнопки наверх. Почему пружинистой..? …а посмотрите здесь на сайте пример работы.

 

Прописывать его рекомендую перед закрывающим тегом </bоdy> в файле footer.php — так полезнее для скорости загрузки сайта и души блогера.

 

 

<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 МИГ подписки - ВРЕМЯ знаний!!

 

 

Что ещё… обратите внимание, что подключение нужной нам библиотеки мы производим единожды.

Напоминаю: внимательнее приглядитесь к файлам сайта на предмет подключения одноимённых библиотек. И если библиотека 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


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


меточная навигация:


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

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

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *