Как проверить, будет ли URL-адрес привязки переходить на тот же сайт (и прокрутить плавно, иначе оставить страницу)? - PullRequest
Новая
       7

Как проверить, будет ли URL-адрес привязки переходить на тот же сайт (и прокрутить плавно, иначе оставить страницу)?

0 голосов
/ 09 января 2019

Я пытаюсь создать пуленепробиваемый скрипт, который выполняет анимационную прокрутку на якорь с помощью jQuery, но только если местоположение якоря в href указывает на существующий якорь на моем текущем сайте.

Это скрипт: 

  var assConfig;

  assConfig = {
    duration: 500,
    easing: 'swing',
    complete: null
  };

  //Smooth scrolling with links
  $('a[href*=\\#]:not([href$=\\#])').on('click', function(event) {
    var hash;
    // if the anchor is on another site or subsite simply proceed with the default action
    // which will probably be leaving the site and go to ghe href location
    if (!o(event.target).attr("href")).startsWith("#") && (##### CONDITION-PART ######)) {
      return;
    }
    event.preventDefault();
    hash = '#' + $(event.target).attr("href").split("#")[1];
    if (typeof $(hash).offset() !== 'undefined') {
      $('html,body').animate({
        scrollTop: $(this.hash).offset().top
      }, assConfig.duration, assConfig.easing, assConfig.complete);
    }
  });

  // Smooth scrolling when the document is loaded and ready
  $(document).ready(function() {
    if (typeof $(location.hash).offset() !== 'undefined') {
      $('html,body').animate({
        scrollTop: $(location.hash).offset().top
      }, assConfig.duration, assConfig.easing, assConfig.complete);
    }
  });

У меня вопрос, что поставить вместо ##### CONDITION-PART ######. Если якорь начинается с хэштега, он может быть только на той же странице. Якорные ссылки, такие как: 

href="/?controller=info&action=site/foo#my-beautiful-anchor-target"
href="/#my-beautiful-anchor-target"
href="http://www.example.com/?foo#my-beautiful-anchor-target"

Иногда они могут означать один и тот же сайт, хотя они разные, например: 

href="http://www.example.com/?foo#my-beautiful-anchor-target"
href="/?foo#my-beautiful-anchor-target"
href="?foo#my-beatiful-anchor-target"

Так, каков наилучший способ обнаружить, если между $(event.target).href и window.location.href происходит перезагрузка страницы?

1 Ответ

0 голосов
/ 11 января 2019

Вот чем я закончил: 

event.target.pathname !== window.location.pathname 
|| event.target.hostname !== window.location.hostname 
|| event.target.protocol !== window.location.protocol 
|| event.target.search !== window.location.search

Окончательное полное решение: 

var assConfig = {
    duration: 500,
    easing: 'swing',
    complete: null
};

//Smooth scrolling with links
$('a[href*=\\#]:not([href$=\\#])').on('click', function (event) {
    var hash;
    if (event.target.pathname !== window.location.pathname || event.target.hostname !== window.location.hostname || event.target.protocol !== window.location.protocol || event.target.search !== window.location.search) {
        return;
    }
    event.preventDefault();
    hash = '#' + $(event.target).attr("href").split("#")[1];
    if (typeof $(hash).offset() !== 'undefined') {
        $('html,body').animate({
            scrollTop: $(this.hash).offset().top
        }, assConfig.duration, assConfig.easing, assConfig.complete);
    } else {
        console.log("Note: Scrolling to the anchor ist not possible as the anchor does not exist.");
    }
});

// Smooth scrolling when the document is loaded and ready
$(document).ready(function () {
    if (typeof $(location.hash).offset() !== 'undefined') {
        $('html,body').animate({
            scrollTop: $(location.hash).offset().top
        }, assConfig.duration, assConfig.easing, assConfig.complete);
    } else {
        console.log("Note: Scrolling to the anchor ist not possible as the anchor does not exist.");
    }
});
...