Send to Bottom of Div Element on User Scroll

Question

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!

Answer 1

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 () {}
                });
            });
        });