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);
    });

但是，如果链接是另一个页面＆＃34; contact-us.php #media＆＃34;它不起作用，因为它期望它是同一页。

如何更改代码仍然定位所有＃链接，但如果链接到另一个页面则忽略它？

Answer 1

如果所有目标元素的href属性以#开头，那么您可以使用属性启动选择器。

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

另一个选择是检查锚点的路径名：

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

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

Answer 2

发现这是专门针对同一页面的。

Performs a smooth page scroll to an anchor on the same page

与jQuery的独特锚链接

2 个答案: