在我的网页中，我有 4 个“航点”，它们在菜单中有各自的链接。我需要的是将页面的滚动也绑定(bind)到这些航点。因此，当页面加载时，指针位于顶部并根据滚动方向，页面移动到下一个/上一个路径点。到目前为止，我已经想出了这种简单的方法，由于 scrollTo() 函数再次触发整个方法，它进入了滚动循环。
$(function () {
var top = $(window).scrollTop();
var currentWaypoint = 0;
var previousWaypoint = 0;
$(window).scroll(function () {
console.log("Scroll triggered");
console.log("Current Waypoint: " + currentWaypoint);
var curTop = $(window).scrollTop();
if (top < curTop) {
if (currentWaypoint < 4) {
previousWaypoint = currentWaypoint;
currentWaypoint=currentWaypoint+1;
}
}
else {
if (currentWaypoint > 0) {
previousWaypoint = currentWaypoint;
currentWaypoint=currentWaypoint-1;
}
}
top = curTop;
if (previousWaypoint != currentWaypoint) {
switch (currentWaypoint) {
case 1:
$.scrollTo(document.getElementById("waypoint-collection"));
case 2:
$.scrollTo(document.getElementById("waypoint-report"));
case 3:
$.scrollTo(document.getElementById("waypoint-video"));
case 4:
$.scrollTo(document.getElementById("waypoint-mail"));
default:
}
}
console.log("New Waypoint: " + currentWaypoint);
});
});
我在一些网站上看到过这种行为，但似乎找不到与谷歌相关的任何内容。有什么想法吗？
编辑:
相关HTML代码:
<html>
<head>
<style>
body {
background-color: #FFFFFF;
}
.features-container-wh {
min-height: 12.5rem;
text-align: center;
height: 100%;
}
.features-container-bl {
background-color: #43bfcb;
text-align: center;
color: #FFFFFF;
height: 100%;
}
.features-container-bottom {
height: 100%;
}
</style>
</head>
<body>
<div class="features-container-wh">
<a href="#waypoint-collection">Collection</a>
<a href="#waypoint-report">Report</a>
<a href="#waypoint-video">Video</a>
<a href="#waypoint-mail">Mail</a>
</div>
<div class="features-container-bl" id="waypoint-collection">
<p>Stuff...</p>
</div>
<div class="features-container-wh" id="waypoint-report">
<p>Stuff...</p>
</div>
<div class="features-container-bl" id="waypoint-video">
<p>Stuff...</p>
</div>
<div class="features-container-bottom" id="waypoint-mail">
<p>Stuff...</p>
</div>
</body>
最佳答案
$('html, body').animate({scrollTop: $("#.wayPoint1").offset().top}, 2000);
关于javascript - 如何在 jQuery 中从一个航点滚动到另一个航点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38174419/