jQuery的独特锚链接

Question

I have some jQuery code that targets all anchor links that are clicked.

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

Jquery code

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

However if the link is another page "contact-us.php#media" it does not work because it is expecting it to be the same page.

How can I change the code to still target all # links but ignore it if it is linking to another page?

Answer 1

If href attribute of the all target elements start with # then you can use the Attribute Starts With selector.

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

Another option is checking the pathname of anchors:

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

The above snippet just checks the pathname, if you want to check the hostnames as well, you can add another condition to the filter method, ie: && this.hostname === location.hostname

Answer 2

Found this that specifically targets the same page.

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