Scroll to next Div using Jquery with Prev and Next Icons
Question
I am using Jquery with HTML and trying to scroll to the next Div with Animation. Sadly, nothing is helping me out. I want an icon on the bottom left which will scroll to the next div. This is my basic divs
<body>
<div id="scroller"><a class="display" href="#">Link </a></div>
<div class="menu-wrap"></div>
<div id="section1" class="section current"></div>
<div id="section2" class="section"> </div>
<div id="section3" class="section"> </div>
<div id="section4" class="section"></div>
<div id="section5" class="section"></div>
<div id="section6" class="section"></div>
<div id="section7" class="section"></div>
<div id="section8" class="section"></div>
<div id="footer"></div>
</div>
I want to scroll between the "section".I have others Divs inside each of them but different ids. I dont think that should be a problem? Nothing seems to work, My jQUery is
$(document).ready(function(){
$('a.display').on('click', function(e) {
e.preventDefault();
var offset = $(this).next().find('div#section').offset().top;
$('html, body').stop().animate({ scrollTop: offset }, 400);
});
});
1 answers
solution1
1 ACCPTED 2015-05-16 20:56:14
Your code is not doing what you think.
First, $(this).next() returns no elements. Event if it did, you should've used .find('div.section') instead of .find('div#section') . Also, for the "scroll to next" capability you have be able to somehow know the current scroll position and compare it to the position of the
anticipated next one.
Considering this I suggest using jquery-scrollTo plugin instead of inventing your own implementation.
Here's an example usage: JSFiddle
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.