拥有平滑滚动到 id 的现有 JavaScript，希望帮助为特定 id 添加例外

Have existing JavaScript that smooth scrolls to id's, would like help adding an exception for a specific id

本文关键字：id 帮助 希望 添加 JavaScript 滚动 平滑 拥有      更新时间：2023-09-26

这里的JavaScript将平滑滚动到所有哈希链接。我需要id=nav及其生成的哈希链接，/#nav下面的JavaScript忽略。 id=nav用于菜单响应能力，当它被下面的JavaScript征用时，它会破坏菜单。

有人可以建议我如何忽略以下 JavaScript 中的特定 id 吗？

我还制作了一个有效的HTML演示，您可以在下面看到。

.top {
  position: fixed;
  top: 0;
}
a {
  margin-left: 20px;
  display: block;
}
#nav {
  height: 800px;
  background-color: #777;
  display: block;
}
#test1 {
  height: 800px;
  background-color: #ccc;
  display: block;
}
#test2 {
  height: 800px;
  background-color: #111;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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) {
          $('html, body').animate({
            scrollTop: target.offset().top - 80
          }, 500);
          return false;
        }
      }
    });
  });
</script>
<body>
  <div class="top">
    <a href="#nav">nav</a>
    <a href="#test1">1</a>
    <a href="#test2">2</a>
  </div>
  <div id="nav"></div>
  <div id="test1"></div>
  <div id="test2"></div>
</body>

在

JavaScript 的第二行之后添加这一行：

if($(this).attr("href") == "#nav") return;

所以它看起来像这样：

$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
        if($(this).attr("href") == "#nav") return;
        //... Rest of code

JSFiddle

这是如何工作的，它检查单击链接的href属性的值是否"#nav" 。如果是，则函数返回false并且不会执行。

只需在选择器中添加条件，或与 .not 选择器组合，如下所示。

.top {
  position: fixed;
  top: 0;
}
a {
  margin-left: 20px;
  display: block;
}
#nav {
  height: 800px;
  background-color: #777;
  display: block;
}
#test1 {
  height: 800px;
  background-color: #ccc;
  display: block;
}
#test2 {
  height: 800px;
  background-color: #111;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $('[href="#nav"]').click(function(e) {e.preventDefault; return false;}); // Use this line if you don't want to go to top. Personally I would not use anchors if their base functionality is removed.
    $('a[href*="#"]:not([href="#"])').not('[href="#nav"]').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) {
          $('html, body').animate({
            scrollTop: target.offset().top - 80
          }, 500);
          return false;
        }
      }
    });
  });
</script>
<body>
  <div class="top">
    <a href="#nav">nav</a>
    <a href="#test1">1</a>
    <a href="#test2">2</a>
  </div>
  <div id="nav"></div>
  <div id="test1"></div>
  <div id="test2"></div>
</body>

相关文章：