为wordpress添加平滑滚动和滚动间谍功能答案

【问题标题】：add smooth scrolling and scroll spy function to wordpress为wordpress添加平滑滚动和滚动间谍功能
【发布时间】：2017-04-05 14:29:00
【问题描述】：

我已经构建了一个侧列表菜单，需要平滑滚动和滚动间谍到页面的不同部分。我的链接跳转到锚链接，但我似乎无法平滑滚动和滚动间谍工作。我正在使用引导程序和 wordpress。

这是我的 HTML：

<div class="page-menu">
  <ul class="page-menulist">
    <li class="menuitem active">
      <a href="#S1"></a>
    </li>
    <li class="menuitem">
      <a href="#S2"></a>
    </li>
    <li class="menuitem">
      <a href="#S3"></a>
    </li>
    <li class="menuitem">
      <a href="#S4"></a>
    </li>
    <li class="menuitem">
      <a href="#S5"></a>
    </li>
    <li class="menuitem">
      <a href="#S6"></a>
    </li>
  </ul>
</div>

这是我的 JS：

$(document).ready(function() {
   // Add smooth scrolling to all links
   $("a").on('click', function(event) {

     // Make sure this.hash has a value before overriding default behavior
     if (this.hash !== "") {
       // Prevent default anchor click behavior
       event.preventDefault();

       // Store hash
       var hash = this.hash;

       // Using jQuery's animate() method to add smooth page scroll
       // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
       $('html, body').animate({
         scrollTop: $(hash).offset().top
       }, 800, function() {

         // Add hash (#) to URL when done scrolling (default click behavior)
         window.location.hash = hash;
       });
     } // End if
   });
 });

【问题讨论】：

问题不复现时很难调试代码。您能否使用 sn-p 工具或您选择的 sn-p 网站为您的问题创建一个minimal reproducible example？

标签： jquery wordpress twitter-bootstrap smooth-scrolling scrollspy

【解决方案1】：

这是一个例子：还要注意文档；

需要引导导航

Scrollspy 目前需要使用 Bootstrap nav component 来正确突出显示活动链接。

您需要将nav 类添加到您的UL (<ul class="nav page-menulist">) 以利用链接突出显示。

您可以使用data-attributes 对您的菜单启用ScrollSpy（<body data-spy="scroll" data-target="#navbar"> 的目标ID <div class="page-menu" id="navbar"> 位于page-menu div。）。

工作示例：

$(document).ready(function() {
  $(".menuitem a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {
        window.location.hash = hash;
      });
    }
  });
});

body {
  position: relative;
}
section {
  position: relative;
  margin-left: 100px;
}
section div {
  padding: 250px 0;
  text-align: center;
  font-size: 50px;
  color: white;
}
section div:nth-child(1) {
  background-color: purple;
}
section div:nth-child(2) {
  background-color: fuchsia;
}
section div:nth-child(3) {
  background-color: blueviolet;
}
section div:nth-child(4) {
  background-color: darkviolet;
}
section div:nth-child(5) {
  background-color: cornflowerblue;
}
section div:nth-child(6) {
  background-color: darkorchid;
}
.page-menu {
  position: fixed;
  background: white;
  top: 0;
  bottom: 0;
  width: 100px;
}
.nav.page-menulist {
  list-style: none;
  padding: 0;
}
.nav.page-menulist .menuitem a {
  color: black;
  padding: 10px 20px;
}
.nav.page-menulist .menuitem.active {
  background-color: #e8e8e8;
}
.nav.page-menulist .menuitem.active > a {
  color: darkorchid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target="#navbar">

  <div class="page-menu" id="navbar">
    <ul class="nav page-menulist">
      <li class="menuitem">
        <a href="#S1">ONE</a>
      </li>
      <li class="menuitem">
        <a href="#S2">TWO</a>
      </li>
      <li class="menuitem">
        <a href="#S3">THREE</a>
      </li>
      <li class="menuitem">
        <a href="#S4">FOUR</a>
      </li>
      <li class="menuitem">
        <a href="#S5">FIVE</a>
      </li>
      <li class="menuitem">
        <a href="#S6">SIX</a>
      </li>
    </ul>
  </div>

  <section>
    <div id="S1">
      ONE
    </div>

    <div id="S2">
      TWO
    </div>

    <div id="S3">
      THREE
    </div>

    <div id="S4">
      FOUR
    </div>

    <div id="S5">
      FIVE
    </div>

    <div id="S6">
      SIX
    </div>
  </section>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【讨论】：