【问题标题】:Scroll to the next div [closed]滚动到下一个 div [关闭]
【发布时间】:2017-04-10 00:13:32
【问题描述】:

我想要这样,每当有人在我的网页上向下滚动时,它都会自动/平滑滚动到下一个

div class="bigCards"

ty

【问题讨论】:

  • 兄弟,您使用 JavaScript 来执行这些操作。我建议您将其添加到标签列表中。
  • 另外...您确定要这样做吗?如果我在你的网站上,那真的会让我很沮丧。
  • 我了解使用的利弊。从设计的角度来看,是的,这将是一个很好的补充。

标签: javascript html css scroll


【解决方案1】:

不,你还需要 jquery:

				var delay = false;

				$(document).on('mousewheel DOMMouseScroll', function(event) {
					event.preventDefault();
					if (delay) return;

					delay = true;
					setTimeout(function() {
						delay = false
					}, 200)

					var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

					var a = document.getElementsByClassName("anchor");
					if (wd < 0) {
						for (var i = 0; i < a.length; i++) {
							var t = a[i].getClientRects()[0].top;
							if (t >= 20) break;
						}
					} else {
						for (var i = a.length - 1; i >= 0; i--) {
							var t = a[i].getClientRects()[0].top;
							if (t < -20) break;
						}
					}
					$('html,body').stop(true,false).animate({
							scrollTop: a[i].offsetTop
						}, {
							queue: false,
							duration: 1000
						}

					);

				});
		
.fullpage{
  height:100vh;
  width:100%; 
}

#bg1{
  background:green;
}
#bg2{
  background:red;
}
#bg3{
  background:blue;
}
#bg4{
  background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a name="anch0" class="anchor"></a>
<div id="bg1" class="fullpage">

</div>
<a name="anch1" class="anchor"></a>
<div id="bg2" class="fullpage">

</div>
<a name="anch2" class="anchor"></a>
<div id="bg3" class="fullpage">

</div>
<a name="anch3" class="anchor"></a>
<div id="bg4" class="fullpage">

</div>

【讨论】:

  • 好吧。好的。我将尝试在我的页面上实现您的代码。泰!!!
  • 你可以用按钮运行代码sn-p试试。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-08-01
  • 1970-01-01
  • 2023-03-04
  • 1970-01-01
  • 1970-01-01
  • 2013-03-21
  • 1970-01-01
相关资源
最近更新 更多