div在視口中出現時滾動到頂部

Question

發現很難找到此技術的在線資源。

在我的JSFiddle用戶可以使用'下一個'或'prev'循環全屏div。用戶也可以滾動到下一個或前一個div。

我的問題是，如果用戶滾動然後很難讓他們對齊全屏div到視口，所以我寧願如果當用戶的屏幕上的大部分div它會自動滾動對齊頂部與視口的div。

在我的JSFiddle中，我添加了一個腳本，用於檢測元素是否在視口中，該腳本可以工作，但我無法弄清楚如何添加if語句，當div進入視口時， div到屏幕頂部使用.scrollTo。

Answer 1

你可以使用jQuery inview

然後像這樣運行scrollTo：

$(elm).bind('inview', function(event, visible) { 
    if (visible) { 
    scrollTo(); 
    } else { 
    } 
}); 

可能需要運行這個當窗口大小，以及：

var timerDelay = (function(){ 
    var timer = 0; 
    return function(callback, ms){ 
    clearTimeout (timer); 
    timer = setTimeout(callback, ms); 
    }; 
})(); 



$(window).resize(function() { 
    timerDelay(function(){ 

    //run inview function 

    }, 500); 
});