Currently, my website works well with the standard user scroll, however, I would like to implement something like this where when the user scrolls, it sends them to the bottom or center of the div element. I assume these elements have a height:100vh. Can someone help, please? Thanks!
copy and paste this code on your index.js
and custom code or var elm
var element = ".et_pb_section";
$(element).each(function (index) {
// accept wheel event individually
$(this).on("mousewheel DOMMouseScroll", function (e) {
e.preventDefault();
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
} else if (event.detail)
delta = -event.detail / 3;
var moveTop = $(window).scrollTop();
var elementSelecter = $(element).eq(index);
// wheel top to bottom
if (delta < 0) {
if ($(elementSelecter).next() != undefined) {
try {
moveTop = $(elementSelecter).next().offset().top;
} catch (e) {}
}
// wheel bottom to top
} else {
if ($(elementSelecter).prev() != undefined) {
try {
moveTop = $(elementSelecter).prev().offset().top;
} catch (e) {}
}
}
// move (0.5sec)
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 500,
complete: function () {}
});
});
});