Scroll to the next div

Question

I want that, whenever someone scrolls down on my web page it makes an auto/smooth scroll to the next

div class="bigCards"

ty

Answer 1

No, you need jquery also:

				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>