! Запросто с WordPress - доступная ручная работа по правилам оптимального интернета
...здесь Ваша реклама.?.
Здравствуйте !
написано: — 
отредактировано: 2017-12-20
издатель:  в теме: В теме: без плагинов реплики: 2 комментария
 
Запросто с WordPress - студия ATs media fashion Reception WordPress golden

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

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

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

 

Также возможно ознакомиться с прошлой статьёй кнопку наверх с плавным перемещением странички может что изыщете полезное, да и статья проще…

 


Благодарности)) и вопросы в комментариях - помогу… в чём дюжу
А также Вы можете просто:
Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
 ! самое читаемое:
   Как к статье добавить блок ссылок на похожие по теме записи сайта   Как выбрать хостинг — пошаговые инструкции (обзоры 4 хостингов) — нюансы модного ssl сертифицирования   Санкции вебмастера Яндекс (фатальные ошибки) — предупреждения, или что это?..   YouTube закроет монетизацию для обывателя… как площадку для заработка на видеороликах   Убираем циклическую ссылку h1 логотипа на главной странице   Как добавить ссылки на самые комментируемые по времени посты в сайдбар или на страничку   Как самостоятельно установить в Notepad++ плагин Compare   Создаём плагин — добавочный файл функций — my-functions.php   Ускоряем сайт: основные кэш и gzip правила .htaccess которые нужно знать   Продвижение контентом или нужно настраивать сайт — валидный код шаблона..?   Включаем обслуживание gzip сжатия файлов на хостинге и в htaccess   Подключение jQuery библиотеки от CDN Google — рационально!..   Уже в этом году WordPress потребует от пользователей протокол HTTPS   Как исключить вывод (выборочно) поста с главной страницы сайта — регулировка в админке
↔ перетаскивайте ленту ↔
ещё статьи по теме:

смотреть ещё статьи в теме В теме: без плагинов
меточная навигация:


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

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

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

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

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

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

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

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

 необходимо принять правила конфиденциальности и пользовательского соглашения
Яндекс.Метрика