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

找到专门针对同一页面的内容。

执行平滑的页面滚动到同一页面上的锚点