javascript - 滚动到 div 顶部

Question

我正在尝试创建类似 http://deathtrap.co/ 的内容- 当您滚动时，您会自动转到下一个或上一个 div 的顶部

$(window).bind('scroll', function () {
      $('html, body').animate({scrollTop:$('#scroll-over').position().top}, 'slow');

});

这可以滚动到下一个 div，但随后您无法向上滚动。 我只有想要在两个部分之间滚动的部分。

<div id = "banner">
   content
</div>
<div id ="scroll-over">
  content
</div>

Answer 1

在 jQuery 中执行以下操作:

首先将当前 div 设置为 1，因为网站从顶部开始。 然后你可以看到我实现了一个函数来指示用户是向上还是向下滚动。如果他向下滚动，您将当前的 div 设置为 2。jQuery 将向下滚动到该 div。请记住，您必须提供正确的 ID。

var currentDiv = 1;

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('html, body').bind(mousewheelevt, function(e){

    var evt = window.event || e //equalize event object     
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF

    if(delta > 0) {
        //scroll up
        currentDiv = 1;
        $('html, body').animate({
            scrollTop: $("#"+currentDiv).offset().top
        }, 500);
    }
    else{
        //scroll down
        currentDiv = 2;
        $('html, body').animate({
            scrollTop: $("#"+currentDiv).offset().top
        }, 500);
    }   

});

假设你的 html 看起来像这样:

<div id = "1">
   content
</div>
<div id ="2">
  content
</div>

如果将它们的高度设置为 100%，则可以在它们之间滚动。稍后我会发布一个实例。