Извлечь хеш или страницу

Question

Мне нужно отредактировать код ниже.Теперь это хорошо работает для якорей в URL (www.mypage.com/#contact).Мне нужно изменить этот код, чтобы сохранить его в переменной var target в соответствии со следующим примером:

www.mypage.com / # contact> target = contact

www.mypage.com / page.html> target = page

www.mypage.com / page.html # contact> target = contact

$('a.js-scroll-trigger[href*="#"]').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: (target.offset().top - 70)
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
});

Спасибо за помощь.

Answer 1

В моем примере ниже я определяю переменную, которая содержит либо hash (без "#"), либо pathname (без расширения файла).Затем результирующее значение проверяется на наличие элемента с этим id или name.Если элемент существует, выделите его.

$('a.js-scroll-trigger').click(function(e) {
  e.preventDefault();

  // get the hash (without #) or filename (without extension)
  var s = this.hash.substr(1) || this.pathname.match(/([^\/]+)(?=\.\w+$)/)[0];
  console.log(s);

  // test for an existing element that has matching ID or NAME.
  var $target = $("#" + s).length ? $("#" + s) : $('[name=' + s + ']');

  // if that element exists, scroll to it
  if ($target.length) {
    $('html, body').animate({
      scrollTop: ($target.offset().top - 70)
    }, 1000);
  }

});

a {
  display: block;
}

#contents {
  margin-top: 150vh;
}

#contents div {
  height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="js-scroll-trigger" href="https://www.mypage.com/#contact">www.mypage.com/#contact</a>
<a class="js-scroll-trigger" href="https://www.mypage.com/page.html">www.mypage.com/page.html</a>
<a class="js-scroll-trigger" href="https://www.mypage.com/page.html#contact">www.mypage.com/page.html#contact</a>

<div id="contents">
  <div id="contact">
    CONTACT
  </div>
  <div name="page">
    PAGE
  </div>
</div>