jQuery mouse ile id'ye gitme

Bir sitede görmüştüm yanda 5 tane buton vardı.O butonlara basarak bir sonraki div elementine gidebiliyordun yada mouse tekerliğini kaydırarakta bir sonraki div bölgesine geçebiliyordun bunu nasıl yapabilirim?

Burada bişiler yazmayı denedim şöyle onuda vereyim, framework olarak felan öneriniz varsa açığım.TIklayarak gitmek istemiyorum bu en kolayı zaten benim istediğim mouse tekerliğini kaydırdığında #section2 sonra biraz daha kaydırdığında #section3'e geçsin.

HTML Kodum:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Javascript kodum:


$(document).scroll(function(){
var scroll_position = $(document).scrollTop();
$('.log').text(scroll_position);

// > 0

if (scroll_position > 100) {
$([document.documentElement, document.body]).animate({
scrollTop: $("#section2").offset().top
}, 2000);
} else if (scroll_position > 770) {
$([document.documentElement, document.body]).animate({
scrollTop: $("#section3").offset().top
}, 2000);
}
});



https://projects.lukehaas.me/scrollify/#home

bu kütüphaneyi kullanabilirsin.


(function() {
let delay = false;

$(document).on("mousewheel DOMMouseScroll", function(e) {
e.preventDefault();
if(delay) return;

delay = true;
setTimeout(function(){delay = false},200);

let wd = e.originalEvent.wheelDelta || -e.originalEvent.detail;

// Sadece section kullanırsan çalışır.
// Section yerine başka bir şey kullanmak istiyorsan her bölüme aynı class name i verip
// let a = document.getElementsByClassName(".className") ile alt satırı değiştir.
let a = document.getElementsByTagName("section");

// "a" adındaki bir diziye her section eleman olarak kaydediliyor.
// Sonra scroll "a" dizisinin indeksini değiştiriyor ve bir sonraki veya bir önceki sectiona geçiliyor.

// Aşağı iniş
if(wd < 0) {
for(var i = 0 ; i < a.length ; i++) {
var t = a[i].getClientRects()[0].top;
if(t >= 40) break;
}
}
// Yukarı çıkış
else {
for(var i = a.length-1 ; i >= 0 ; i--) {
var t = a[i].getClientRects()[0].top;
if(t < -20) break;
}
}
if(i >= 0 && i < a.length) {
$('html,body').animate({
scrollTop: a[i].offsetTop
});
};
});
})();