自動滾動到部分

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