jQuery – Плавный скролл к якорю с учетом внешнего перехода
Друзья, представляю Вашему вниманию скрипт который облегчил мою жизнь просто вразы, так как он позволяет красиво анимировать переход к анкорной ссылке (к якорю). Причем как при клике по ссылке находясь не посредственно на сайте, так и кликнув на ссылку с анкором допустим где-то на внешнем ресурсе. При переходе с другой страницы все равно будет срабатывать приятный, плавный ход к ссылке с “#”.
Важный момент! Вы должны обязательно указывать анкорные ссылки в слешем перед знаком “#”. Например вот так:
<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
// -------------------------------------------------------