Question

如果#banner部分中的事件会滚动，我需要从部分#about-me自动平滑滚动到部分#banner。

我试试这个：

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

但它不起作用。（我使用了scrollTo插件）。

#banner的身高为100vh。

Answer 1

您正在寻找的代表团是mousewheel。您需要使用e.preventDefault();来阻止浏览器的默认行为（滚动）。

工作演示：

＆＃13;

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

＆＃13;

body {
  margin:0;
}

div {
  width:100%;
  height:100vh;
}

#banner {
  background:red;
}

#about-me {
  background:green;
}

＆＃13;

<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>

＆＃13;

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

自动滚动到部分

1 个答案: