javascript - 使用 jQuery 的独特 anchor 链接

Question

我有一些针对所有被单击的 anchor 链接的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 属性均以 # 开头，则您可以使用 Attribute Starts With 选择器。

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

另一个选项是检查 anchor 的路径名:

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

上面的代码片段只是检查路径名，如果您还想检查主机名，您可以在过滤方法中添加另一个条件，即: && this.hostname === location.hostname