自动滚动到部分

Question

I need to automatic, smooth scroll from section #banner , to section #about-me if in section #banner will event scroll.

I try this:

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

but it not working. (I used scrollTo plugin).

#banner have height 100vh .

Answer 1

The delegation that you are looking for is mousewheel . You need to use e.preventDefault(); to block the default behavior (scroll) of the browser.

Working demo:

 $('#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