javascript - JQuery 滚动到 anchor - 仅定位某些链接

Question

我在 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>

它工作得很好，只是现在所有超链接(例如一些 Bootstrap 选项卡链接)都会触发脚本。

如何使上述脚本工作但仅适用于以下链接:#mission、#vision、#strategy？

谢谢!

Answer 1

更改您的选择器:

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

或者您可以使用.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
});

查看下面的示例演示:-

$('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>