TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

jQuery – плавный скрол к якорю при переходе с другой страницы сайта или по прямой ссылке

3 269

За данный скрипт очень благодарен humster_spb первый его вариант опубликован здесь.
Скрипт:

jQuery(document).ready(function($) { var myHash = location.hash; //получаем значение хеша location.hash = ''; //очищаем хеш if(myHash[1] != undefined){ //проверяем, есть ли в хеше какое-то значение $('html, body').animate( {scrollTop: $(myHash).offset().top - 110} , 700); //скроллим за полсекунды location.hash = myHash; //возвращаем хеш }; });

В строке «.top — 110» цифра 110 означает отступ сверху, по этому при не надобности её стоит убрать. В остальном уверен все и так понятно по комментариям в коде.

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

Иногда бывают случаи когда скрипт выше не срабатывает, в таких случаях можно воспользоваться аналогом ниже:

jQuery(document).ready(function() { jQuery(window).bind("load", function() { //Пример исключения ссылки: //jQuery('a[href="#"]:not([href="#"],[href="#spu-209"],[href="#spu-211"],[href="#spu-212"],[href="#spu-213"],[href="#spu-214"],[href="#spu-215"],[href="#spu-217"])').click(function() { jQuery('a:not(.spu-clickable)[href="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') || location.hostname == this.hostname) { var target = jQuery(this.hash); target = target.length ? target : jQuery('[name=' + this.hash.slice(1) + ']'); if (target.length) { jQuery("html, body").animate({ // $('html, body').animate({ scrollTop: target.offset().top - 37 }, 1000); return false; } } }); }); }); jQuery(window).load(function() { function goToByScroll(id) { jQuery("html, body").animate({ scrollTop: jQuery("#" + id).offset().top - 38 }, 1000); } if (window.location.hash != '') { goToByScroll(window.location.hash.substr(1)); } });

Взято здесь:

https://gist.github.com/niccolomineo/6adeb8942444b2a2a46669fb4306baf9

Если возникают проблемы в данной части кода:

.animate({scrollTop: jQuery("#"+id).offset().top - 0 }, 1000)

Меняем её на что-то такое:

.animate({scrollTop: jQuery("#"+id).offset({top:-0})}, 1000)

Иногда верстка может отличатся от указанного здесь селектора:

jQuery('html, body')

По этому вставляем свой селектор например делаем так:

jQuery('body.home')

Источник записи: https://mediadoma.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее