Scroll to Next Section jquery - html

Question

(function ($) {
var window = $(window),
one = $("#one"),
two = $("#two"),
three = $("#three"),
four = $("#four"),
oneT = one.offset().top,
twoT = two.offset().top,
threeT = three.offset().top,
fourT = four.offset().top;
function Scroll(div) {
var tp = $(div).offset().top;
$("html, body").animate({ scrollTop: tp }, 500);
}
var tmp = 0;
var mousewheelevt = /Firefox/i.test(navigator.userAgent)
? "DOMMouseScroll"
: "mousewheel";
$("section").bind(mousewheelevt, function (e) {
var evt = window.event || e;
evt = evt.originalEvent ? evt.originalEvent : evt;
var delta = evt.detail ? evt.detail * -40 : evt.wheelDelta;
console.log(delta);
if (delta < 0) {
tmp++;
if (tmp > 0) {
var divT = $(this).next();
Scroll(divT);
tmp = 0;
}
} else if (delta > 0) {
tmp--;
console.log("going up");
if (tmp < -1) {
var divT = $(this).prev();
Scroll(divT);
tmp = 0;
}
}
});
})(jQuery);
This is the code im using is there any problem , i am getting error called
index.html:100 Uncaught TypeError: Cannot read properties of undefined (reading 'top')
Can you please help me with this.

Answer 1

You likely do not have 4 sections in your HTML or you have divs with a class and you need a dot: $(".section")
Then you need to use the wheel event instead of your current deprecated code
jQuery messes things up and you need to then use the originalEvent
You do not actually use any of the vars you declared in the beginning
I also got rid of half the tests by testing the existence of next/prev
(function($) {
function Scroll($div) {
var tp = $div.offset().top;
$("html, body").animate({
scrollTop: tp
}, 500);
}
const $sections = $("section");
$sections.on("wheel", function(e) {
const delta = e.originalEvent.wheelDelta; // all newer browsers
const down = delta < 0;
let $divT = down ? $(this).next("section") : $(this).prev("section");
// we may get a next or previous that is undefined - not obvious
if (!$divT.attr("id") || $divT.length === 0) {
if (down) $divT = $sections.first();
else $divT = $sections.last();
}
Scroll($divT);
});
})(jQuery);
section {
height: 500px;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<section id="one">One</section>
<section id="two">Two</section>
<section id="three">Three</section>
<section id="four">Four</section>