移动滚动条一次即可更改屏幕的位置

Question

您好我做了两个div，每个div的高度都覆盖了孔页面。这两个div位于彼此的下面。我想当用户放下鼠标的滚动条时页面直接转到第二个div的开头，而当抬高滚动条直接将页面转到第一格的开头。请帮助我了解如何进行此操作非常感谢。

 #up_page{ width:100%; height:50%; background-color:red; } #down_page{ width:100%; height:50%; background-color:blue; } 

 <div style="width: 100%; height: 1500px;"> <div id="up_page"> </div> <div id="down_page"> </div> </div> 

Answer 1

找到了另一个与您的问题相同的线程。

堆栈溢出

        var winH = $(window).height();
        $('.page').height(winH);

        var c = 0;
        var pagesN = $('.page').length;
        var canScroll = true;

        $(document).bind('mousewheel', function(ev, delta) {
         ev.preventDefault();
         if(!canScroll) return;
         delta>0 ? --c : ++c ;    
         if(c===-1){
         c=0;
         }else if(c===pagesN){
          c=pagesN-1;
         }
         canScroll = false;
           var pagePos = $('.page').eq(c).position().top;       
          $('html, body').stop().animate({scrollTop: pagePos},700,     

         function(){
         canScroll = true;
         });
         return false; 

         });

这是使用jQuery时的外观示例：

工作jsfiddle

希望这就是您想要的。