下一個/上一個錨鏈接，當用戶滾動時如何更新下一個/上一個鏈接

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