javascript - Next/previous anchor link, how to update the next/previous links when the user scrolls -


first time posting here! stack overflow told me include code codepen.io did, think actual link more useful reading code here.

i applied http://codepen.io/haustraliaer/pen/lekny/ javascript code websites , works great. want scrolling past pages update links when scroll down , click next, doesn't go previous anchor link lies.

i tried using scroll event , getboundingclientrect seems can't work that.

any towards solution me greatly.

here link homepages http://quki.kapsi.fi/wasd

$('.js-scroll-to').click(function(e) {      target = $($(this).attr('href'));      if (target.offset()) {         $('html, body').animate({             scrolltop: target.offset().top + 'px'         }, 600);     }      e.preventdefault(); });  $('.js-next').click(function(e) {      var selected = $(".js-list-item.js-current-panel");     var anchors = $(".js-list-item");      var pos = anchors.index(selected);     var next = anchors.get(pos + 1);     var prev = anchors.get(pos - 1);      target = $(next);      $(selected).removeclass("js-current-panel");     $(next).addclass("js-current-panel");      if (target.offset()) {         $('html, body').animate({             scrolltop: target.offset().top + 'px'         }, 600);     }       e.preventdefault(); });   $('.js-prev').click(function(e) {      var selected = $(".js-list-item.js-current-panel");     var anchors = $(".js-list-item");      var pos = anchors.index(selected);     var next = anchors.get(pos + 1);     var prev = anchors.get(pos - 1);      target = $(prev);      $(selected).removeclass("js-current-panel");     $(prev).addclass("js-current-panel");      if (target.offset()) {         $('html, body').animate({             scrolltop: target.offset().top + 'px'         }, 600);     }       e.preventdefault(); }); 

$('.js-scroll-to').click(function(e) {    target = $($(this).attr('href'));    if (target.offset()) {     $('html, body').animate({       scrolltop: target.offset().top + 'px'     }, 600);   }    e.preventdefault(); });  $('.js-next').click(function(e) {   $('.js-prev').show();   var selected = $(".js-list-item.js-current-panel");   var anchors = $(".js-list-item");   var pos = anchors.index(selected);   var next = anchors.get(pos + 1);   var prev = anchors.get(pos - 1);   if (pos <= 4) {     target = $(next);     $(selected).removeclass("js-current-panel");     $(next).addclass("js-current-panel");     if (target.offset()) {       $('html, body').animate({         scrolltop: target.offset().top + 'px'       }, 600);     }     if (pos == 4)       $('.js-next').hide();   }    e.preventdefault(); });  $('.js-prev').click(function(e) {   $('.js-next').show();   var selected = $(".js-list-item.js-current-panel");   var anchors = $(".js-list-item");    var pos = anchors.index(selected);   var next = anchors.get(pos + 1);   var prev = anchors.get(pos - 1);   console.log(pos)   if (pos > 0) {     target = $(prev);      $(selected).removeclass("js-current-panel");     $(prev).addclass("js-current-panel");      if (target.offset()) {       $('html, body').animate({         scrolltop: target.offset().top + 'px'       }, 600);     }   }   if (pos == 1) {     $('.js-prev').hide();   }   e.preventdefault(); }); 

below working example

http://codepen.io/krishnareddy668/pen/myqwjz


Comments

Popular posts from this blog

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -