自动滚动到区段

Question

我需要自动，平滑滚动从节#banner，到节#about-me如果在节#banner将事件卷轴。

我试试看：

$('#banner').bind('scroll', function(event) {
    $(window).scrollTo($('#about-me'), 500);
});

但它不起作用。(我使用了scrollTo插件)。

#banner有高度100vh。

Answer 1

您要寻找的委托是mousewheel。您需要使用e.preventDefault();来阻止浏览器的默认行为(滚动)。

工作演示：

​

$('#banner').bind('mousewheel DOMMouseScroll', function(e) {
  if (e.originalEvent.wheelDelta < 0) {
    e.preventDefault();
    $(window).scrollTo('#about-me', 500);
  }
});

body {
  margin:0;
}

div {
  width:100%;
  height:100vh;
}

#banner {
  background:red;
}

#about-me {
  background:green;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<div id="banner"></div>
<div id="about-me"></div>

​

http://jsbin.com/dubaza/edit?html,css,js