JQuery scroll to anchor - target only certain links

Question

I have the following script that I implement on Sharepoint:

<script>

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('#s4-workspace').animate({
          scrollTop: target.offset().top
        }, 2000);
        return false;
      }
    }
  });
});</script>

It works great, except that now, all hyperlinks, for example also some of the Bootstrap tab links will trigger the script.

How can I make the above script work but only for the following links: #mission, #vision, #strategy ?

Thanks!

Answer 1

change your selector:

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

or you can use .filter() :

$('a[href]').filter(function() {
  var rg = /\#+\w/g; // this makes sure to select all the anchors with "href='#word'"
  return rg.test(this.hash) === true;
}).click(function() {
    // all the functionality as is
});

checkout the sample demo below:-

 $('a[href]').filter(function() { var rg = /\\#+\\w/g; return rg.test(this.hash) === true; }).css('color', 'red') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href='#what'>#what</a> <a href='http://hehehe.com'>http://</a> <a href='#how'>#How</a> 

Answer 2

you can try use it like this

$('#mission[href*="#"]:not([href="#"]), #vision[href*="#"]:not([href="#"]), #strategy[href*="#"]:not([href="#"])')

Css selector Test DEMO

and Js selector Test DEMO