0
569
2018-12-10

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

Пример реально работающего и уже не раз используемого скрипта для плавного скрола к якорю, учитывая переход к якорю с внешних источников
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

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

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

<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: