0

I would like to include in my navbar a button to scroll to the next section in the navbar's <ul>. Currently, I see that in the navbar, the li that is active gains a class active. However, I am not sure how to report this change to the button so that when it is clicked, it will automatically go to the section corresponding to the list item after the currently active one. Could someone please give me some tips for how to do this, ideally in an elegant, bootstrappy way?

Update

Here is a working fiddle: http://jsfiddle.net/mikesol/u4L7gL9e/1/ You'll see the comment that states:

I would like this to automatically go to the next section instead of always going to apple. For example, when the reader is over the section carrot, clicking on this should fastforward to date, etc..

mikesol
  • 1,177
  • 1
  • 11
  • 20

1 Answers1

0

first time : click link scroll to next section --> go to apple section second time : click link scroll to next section --> go to banana section

is it right ?

html : 
<a href="#apple" class="page-scroll">
      click me to scroll to the next section
</a>
js : 
   $('.page-scroll').click(function(){
     var val = $(this).attr('href');
     if(val == '#apple') {
      $(this).attr('href', '#banana');
     }
    // do same with another anchor
   });
gaauspawcscwcj
  • 3
  • 1
  • Almost: the problem is that if scrolling happens by not clicking on this button (i.e. traditional scrolling), the href needs to update automatically. – mikesol Nov 10 '14 at 08:05
  • try to capture position when mouse scroll following link below http://stackoverflow.com/questions/6519043/get-mouse-position-on-scroll. after get position of scroll then re-assign anchor link – gaauspawcscwcj Nov 10 '14 at 08:40