下一个/上一个锚链接，当用户滚动时如何更新下一个/上一个链接

Question

第一次在这里发布！堆栈溢出告诉我包含来自codepen.io的代码，所以我做了，但我认为实际的链接比从这里读取代码更有用。

我将这个http://codepen.io/haustraliaer/pen/leKny/ javascript代码应用于我的网站，它工作的很棒。我想滚动浏览页面来更新链接，以便当我向下滚动并单击下一页时，它不会返回上一个锚链接所在的位置。

我试过使用滚动事件和getBoundingClientRect，但似乎我无法让它像那样工作。

任何对解决方案的帮助都会对我有很大的帮助。

这里是我的主页链接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(); 
}); 

Answer 1

$('.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(); 
}); 

下面是工作示例

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