我正在看这个网站的滚动效果:http://www.monokroom.com 基本上页面上有 anchor ，当您使用鼠标滚轮滚动时(无论多少或多少)都会产生橡皮筋捕捉效果，自动拉伸(stretch)并跳转到下一部分。我什至不知道这叫什么。
我试过滚动捕捉，但所有内容都是水平的而不是垂直的。
我希望能够将它包含在我正在开发的网站中，并且只想知道在哪里可以找到我可以使用的代码。
最佳答案
该站点使用扩展(用于购买):
https://alvarotrigo.com/fullPage/
但是你可以做类似的事情:
$('html, body').animate({
'scrollTop': $('#YourAnchorIDhere').offset().top
}, 2000);
这里是一个示例代码片段。
(function($) {
$(document).ready(function() {
$('html, body').animate({
'scrollTop': $('#anchor123').offset().top
}, 2000);
$('html, body').animate({
'scrollTop': $('#anchor456').offset().top
}, 2000);
});
})(jQuery);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div id="anchor123">Anchor1!</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div id="anchor456">Anchor2</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
</body>
</html>我们使用 offset() 将 jquery 动画附加到 scrollTop；
https://api.jquery.com/scrollTop/ - 描述:获取匹配元素集合中第一个元素滚动条的当前垂直位置，或者为每个匹配元素设置滚动条的垂直位置。
http://api.jquery.com/offset/ - 描述:获取匹配元素集合中第一个元素相对于文档的当前坐标。
更改代码中的“2000”数字以指定您希望 .animate({}) 运行的时间长度
关于javascript - 滚动时如何使网站捕捉到下一个 anchor ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56085346/