为wordpress添加平滑滚动和滚动间谍功能
Posted
技术标签:
【中文标题】为wordpress添加平滑滚动和滚动间谍功能【英文标题】：add smooth scrolling and scroll spy function to 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？ 【参考方案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>【讨论】：
以上是关于为wordpress添加平滑滚动和滚动间谍功能的主要内容，如果未能解决你的问题，请参考以下文章