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％的高度，你可以在它们之间滚动。我稍后会举一个现场例子。

滚动到div的顶部

1 个答案: