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
.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.