JavaScript Smooth Scroll Explained

Question

Я видел следующий фрагмент кода на нескольких страницах. Я понимаю, что он используется для плавной прокрутки в соответствии с разными идентификационными тегами id. Тем не менее, я все еще немного смущен о том, что/как работает замена регулярного выражения, this и hash.

Что именно происходит с этим частым фрагментом кода?

$(function() { 
     $('a[href*=#]:not([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 
        }, 1000); 
        return false; 
       } 
      } 
     }); 
}); 

Answer 1

В коде this ссылается на ссылку нажали. this.hash относится к hash ссылки.

Вот дальнейшая разбивка коды:

$(function() { 

    // Binding an event handler to all anchors that contain 
    // a hash (#), but not necessarily JUST a hash - like href="#" 
    // which is typically used in JS... 

    $('a[href*=#]:not([href=#])').click(function() { 

     // Two conditional checks 
     // First: 
     // location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
     // What we're doing is replacing the first forward slash (/) in the pathname 
     // for the current location and comparing it to the link that's been clicked. 
     // So http://personalsite.com/test/link/src, which normally would have 
     // a pathname of /test/link/src would be test/link/src 

     // The or check (||) is to see if the link matches the current domain 
     // location.hostname == this.hostname 

     // Basically, we want an internal anchor for the page we're on. 

     if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) { 

      // Assigning the variable target, with the hash of the link that's been clicked 
      // which is conveniently enough, a jquery selector for IDs (i.e. #hash) 
      var target = $(this.hash); 

      // We check the target length - basically, does the element exist? 
      // If length equals to 0, we query the DOM by name attribute. Otherwise, we just re-assign target to self. 
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 

      // The rest is self explanatory... (animation using the target's offset) 
      // The return false prevents default behavior 

      if (target.length) { 
       $('html,body').animate({ 
        scrollTop: target.offset().top 
       }, 1000); 
       return false; 
      } 
     } 
    }); 
}); 

Надеется, что это помогает!