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

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

3 844

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

Важный момент! Вы должны обязательно указывать анкорные ссылки в слешем перед знаком “#”. Например вот так:

<a href="/#MyAncor">Привет я твой анкор ;)</a>

jQuery скрипт для плавного скрола к анкору (якорю) с учетом внешнего перехода

// ------------------------------------------------------- // Плавный скрол к якорю v2 START // ------------------------------------------------------- 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 - 10 }, 1000); return false; } } }); }); }); jQuery(window).load(function() { function goToByScroll(id) { jQuery("html, body").animate({ scrollTop: jQuery("#" + id).offset().top - 10 }, 1000); } if (window.location.hash != '') { goToByScroll(window.location.hash.substr(1)); } }); // ------------------------------------------------------- // Плавный скрол к якорю v2 END // -------------------------------------------------------

Пример работы скрипта в живую на CodePen:

Источник записи:

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