修復了滾動與按鈕

所以我有this code下一格，讓我與以前和下一個按鈕的div之間滾動，腳本效果很好，雖然我試圖找到一種方法來解決一點點問題是當我用鼠標滾輪或滾動條正常滾動，然後返回到滾動按鈕時，按鈕會將頁面滾動到之前使用按鈕滾動的位置，並且我希望在我所在的位置繼續滾動，因爲例如，如果我用鼠標滾輪滾動到div nr.3，當我點擊下一個按鈕時，我希望它繼續滾動到div n.4。也許通過創建一個：可見的語句或什麼可以完成這項工作，但我不知道如何編寫它。代碼如下修復了滾動與按鈕

$('div.postSection').first(); 

$('a.display').on('click', function(e) { 
    e.preventDefault(); 

     var t = $(this).attr('id'), 
     that = $(this); 

    if (t === 'nextButton' && $('.currentPost').next('div.postSection').length > 0) { 
     var $next = $('.currentPost').next('.postSection'); 
     var top = $next.offset().top; 

     $('.currentPost').removeClass('currentPost');  
     $(function() { 
       $next.addClass('currentPost'); 
       $('html, body').animate({scrollTop: $('.currentPost').offset().top-55 }, 'slow'); 

     }); 
    } else if (t === 'prevButton' && $('.currentPost').prev('div.postSection').length > 0) { 
     var $prev = $('.currentPost').prev('.postSection'); 
     var top = $prev.offset().top; 

     $('.currentPost').removeClass('currentPost'); 

     $(function() { 
       $prev.addClass('currentPost'); 
       $('html, body').animate({scrollTop: $('.currentPost').offset().top-55 }, 'slow'); 
     }); 
    } 
});

來源

2015-03-13 Cʜᴜɴ

您可以監視每個項目的滾動並使用類或數據屬性標記它們以跟蹤可見或不可見。

或者，我剛剛發現，是一個很好的小選擇器擴展來獲取可見區域中的項目（視口 - 它的名字是這樣的）。只需基於Next或Prev點擊獲取第一個（）或最後一個（），並使用它。

視口：http://www.appelsiini.net/projects/viewport

的擴展工作，如：

$currentPS = $('.postSection:in-viewport').first();

然後你只需更新您next和prev：

var $next = $currentPS.next('.postSection'); 

var $prev = $currentPS.prev('.postSection');

似乎工作得很好： http://jsfiddle.net/j7e9cogs/2/

來源

2015-03-13 18:17:41 Daved

謝謝，是的，這是有用的，但它只適用於If我在我的在線網站上的div的一半。儘管我網站上的div比較大。這些就像帖子 – 2015-03-13 18:26:18

我不知道我遵循你的意思。如果將這些div擴展到容器的頂部和底部之外，它仍會返回可見的一個，從而允許prev（）和next（）返回下一個想要的。 – Daved 2015-03-13 18:30:53

看看這個小提琴更高：http://jsfiddle.net/j7e9cogs/3/ – Daved 2015-03-13 18:31:10

修復了滾動與按鈕

回答

相關問題