Question

我正在查看此网站上的滚动效果：http://www.monokroom.com 基本上，页面上有锚点，并且当您使用鼠标滚轮滚动时（无论滚动多少），都有橡皮筋捕捉效果，该效果会自动拉伸并跳转到下一部分。我什至不知道这叫什么。

我尝试了滚动捕捉，但是所有的动作都是水平而不是垂直的。

我希望能够将其包含在我正在开发的网站中，并且只想提示在哪里可以找到我可以使用的代码。

Answer 1

该网站使用扩展（用于购买）：

但是，您可以执行以下操作：

         $('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（{}）的时间

Answer 2

在CSS TRICKS上找到了这个。对其进行了一些修改，并添加了注释以更好地理解它。

这是文章：https://css-tricks.com/introducing-css-scroll-snap-points/

/* The general styles for the slides ( \make it take up the whole page) */
.page {
  float: left;
  width: 100%;
  height: 100%;
}

.docScroller {
  /*overflow-x: hidden;*/
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  -ms-scroll-snap-points-y: repeat(100%); /* Make the scroll lock every 100% of the screen */
      scroll-snap-points-y: repeat(100%);
  -ms-scroll-snap-type: mandatory;
      scroll-snap-type: mandatory;
  -ms-scroll-snap-destination: 100% 0%; /* Snap the divs to the top of the screen*/
      scroll-snap-destination: 100% 0%;
}

.inside { /* style the content of the slide */
  background: rgba(0, 0, 0, 0.3);
  padding:50px;
  font-family:sans-serif;
  font-size:50px;
  text-align:center;
  position:relative;
  left:-50px;
  width: 100%;
  height:20%;
  color:white;
  font-weight:bold;
}


/* Syle the backgrounds of the slides */
.one {
  background: blue;
}

.two {
  background: purple;
}

.three {
  background: red;
}

.four {
  background: orange;
}

<html>
	<head>
	<meta charset="utf-8">
		<title>CSS Scroll snapping - TESTING</title>
		<link rel="stylesheet" href="/test/csssnapscrolling.css">
	</head>
	<body>
		<div class="docScroller">
			<div class="page one">
			  <div class="inside">
			  Slide 1
			  </div>
			</div>
			<div class="page two">
			  <div class="inside">
			  Slide two
			  </div>
			</div>
			<div class="page three">
			  <div class="inside">
			  Slide three
			  </div>
			</div>
			<div class="page four">
			  <div class="inside">
			  Slide four
			  </div>
			</div>
		</div>

		<script>
		</script>
	</body>
</html>

滚动时如何使网站与下一个锚点对齐？

2 个答案: