Question

我已经建立了一个侧面列表菜单，需要平滑滚动并将间谍滚动到页面的不同部分。我的链接跳转到锚链接，但我似乎无法顺利滚动和滚动间谍工作。我正在使用bootstrap和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
   });
 });

Answer 1

以下是一个示例：还请注意文档;

需要Bootstrap nav

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

您需要将nav课程添加到UL（<ul class="nav page-menulist">）以利用链接突出显示。

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

工作示例：

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

添加平滑滚动和滚动间谍功能到wordpress

1 个答案:

需要Bootstrap nav