CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Arjun Kapur
Arjun Kapur

Reputation: 3

Scroll to next Div using Jquery with Prev and Next Icons

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);
   });
});

Upvotes: 0

Views: 136

Answers (1)

unconditional
unconditional

Reputation: 7656

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

Upvotes: 1

Related Questions