jQuery的獨特錨鏈接

Question

我有一些針對所有單擊的錨鏈接的jQuery代碼。

    <a href="contact-us.php#media">Media Enquiries</a>
    <a href="#testimonials" class="btn">See Why</a>

jQuery代碼

   $('a[href*=#]').on('click', function(event){ 
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });

但是，如果鏈接是另一個頁面“ contact-us.php＃media”，則該鏈接不起作用，因為它期望它是同一頁面。

如何更改代碼以仍然以所有＃個鏈接為目標，但是如果它鏈接到另一個頁面，則忽略它？

Answer 1

如果所有目標元素的href屬性都以#開頭，則可以使用Attributes Froms選擇器。

$('a[href^=#]')

另一個選項是檢查錨的路徑名：

$('a[href*=#]').filter(function() {
   return this.pathname === location.pathname;
}).on('click', ...);

上面的代碼片段僅檢查路徑名，如果您還想檢查主機名，則可以在過濾器方法中添加另一個條件，即： && this.hostname === location.hostname

Answer 2

找到專門針對同一頁面的內容。

執行平滑的頁面滾動到同一頁面上的錨點