jQuery：如何使用滚动作为触发器在部分之间自动滚动

Question

我正在尝试让用户可以在没有导航栏的情况下浏览网页的各个部分。页面有 4 个部分，每个部分都是一个全屏大小（100vh）。每次用户向下滚动时，我希望它有一个动画自动滚动到下一部分。

我可以添加什么 jQuery/javascript 来完成这项工作？

html:

<section></section>
<section></section>
<section></section>
<section></section>

css：

section {
    background-color: #20c080;
    height: 100vh;
    width: 100vw;
}

更新： jQuery：

$(window).scroll(function() {
var scroll = $(this).scrollTop();
console.log(scroll);
if (scroll > 100 && scroll < 200) {
        $('html, body').animate({ scrollTop: $('#about').offset().top }, 'slow');
        return false;
}
else if ( scroll > 950 && scroll < 1050) {
        $('html, body').animate({ scrollTop: $('#work').offset().top }, 'slow');
        return false;
}
});

Answer 1

我没有看到你的代码，所以我只能猜测，你想在用户向右滚动鼠标时自动滚动吗？

如果是这样，您可以尝试给每个部分一个 ID，并在鼠标滚动触发后，通过 JQuery 像下面这样滚动

var orgscroll = $(document).scrollTop(), switchcheck=false;

			function autoScroll(){
				// if(scrollable){
					if(switchcheck) return;
					switchcheck = true;

					var scroll = $(this).scrollTop();
					// scrollable=false;
					
					if (scroll > orgscroll) {
						if (scroll <  $('#lalelada').offset().top) {
			        $('html, body').animate({ scrollTop: $('#lalelada').offset().top }, 'slow');
						}else if ( scroll >  $('#lalelada').offset().top && scroll < $('#about').offset().top) {
						  $('html, body').animate({ scrollTop: $('#about').offset().top }, 'slow');
						}else if ( scroll > $('#about').offset().top && scroll < $('#work').offset().top) {
						  $('html, body').animate({ scrollTop: $('#work').offset().top }, 'slow');
						}else if ( scroll > $('#work').offset().top) {
						  $('html, body').animate({ scrollTop: $('#balabala').offset().top }, 'slow');
						}	
					}else if ( scroll < orgscroll) {
						alert('I\'m scroll up');
					}
					orgscroll = scroll;
				// }
				setTimeout(function(){ switchcheck = false; }, 1000)
			}

			$(window).on('scroll', autoScroll);	

section {
    height: 100vh;
    width: 100vw;
}
section:nth-child(even) {
    background-color: #20c080;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="work"></section>
<section id="about"></section>
<section id="lalelada"></section>
<section id="balabala"></section>