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
Comments
Post a Comment