Eindeutige Anker-Links mit jQuery

Question

Ich habe einige jQuery Code, der auf alle Anker-Links, die angeklickt werden, zielt.

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

jedoch, wenn der Link eine andere Seite ist "Kontakt-us.php # media" es funktioniert nicht, weil sie hoffen, dass es die gleiche Seite sein.

Wie kann ich den Code ändern, um immer noch auf alle # Links zu zielen, aber ignorieren, wenn es auf eine andere Seite verlinkt?

Answer 1

Wenn href Attribut der alle Zielelemente mit # beginnen, dann können Sie das Attributselektor beginnt mit verwenden.

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

Eine weitere Option ist die Überprüfung der Pfadname der Anker:

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

Die obige Snippet nur den Pfad überprüft, wenn Sie auch die Hostnamen überprüfen möchten, können Sie eine weitere Bedingung der Filtermethode hinzufügen , dh: && this.hostname === location.hostname

Answer 2

Gefunden, die speziell auf die gleiche Seite zielt.

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