Why when I scroll, the window can't scroll to the next block? Does it cause from scrollTop: '#' + $('.is-current').next().attr('id')? Also I have tried use offset().top to get the position, but it didn't work.
$('.scroll-block:first').addClass('is-current');
$(window).on('mouseover', function(event) {
if ($('.scroll-block').hasClass('is-current')) {
$('.scroll-block').removeClass('is-current');
$(event.target).parents('.scroll-block:first').addClass('is-current');
} else {
$(event.target).parents('.scroll-block:first').addClass('is-current');
};
});
$(window).on('scroll', function() {
var scroll = $(window).scrollTop();
var position;
$('.is-current').each(function() {
position = $(this);
console.log(scroll)
$('html').animate({
scrollTop: position.next().offset().top
}, 800)
console.log($(this).next().offset().top)
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="scroll-block container" id="block1"></div>
<div class="scroll-block container" id="block2"></div>
<div class="scroll-block container" id="block3"></div>
<div class="scroll-block container" id="block4"></div>use CSS scroll-snap-type: y mandatory to "locking" the position of the viewport to specific elements on the page as the window.