javascript - 自动滚动到最近的div

Question

我正在构建一个包含 4 个 div 的单页 ScrollTo 网站。这些 div 代表我的页面。

Home -> My work -> About me -> Contact

宽度和高度由一小段 JavaScript 定义，该 JavaScript 读取用户在加载或调整大小时的屏幕分辨率。因此 div 始终是用户屏幕的内部宽度和高度。

function resize() {

    document.getElementById("home").style.height = viewportheight+"px";
    document.getElementById("work").style.height = viewportheight+"px";
    document.getElementById("about").style.height = viewportheight+"px";
    document.getElementById("contact").style.height = viewportheight+"px";

我想要实现的是，一旦用户滚动(假设向下或向上 100px)，窗口就会自动捕捉到最近的 div 的顶部。

类似于:

onScroll("100px") up or down { scrollTo("closest #div") };

Answer 1

您可以使用以下方法开始:

//OnScroll:
$(window).scroll(function(){
   //Get current scoll position:
   var iSrollT = $(document).scrollTop();
   //Get the position of your element:
   var iOffT = $('#home').offset().top;
 });

//Set scroll top using an animation:
$('html, body').animate({       
   scrollTop: iOffT
}, 300);

但是你必须实现更多...例如防止 scoll 位置始终捕捉到下一个 div 并且不再可能进行 scolling。