更新窗口大小調整的滾動位置

Question

我目前正在使用平滑滾動和ID /定位標記的組合滾動到我網站上的內容。下面的代碼獲取DOM中下一個'section'的ID，並將其ID添加爲'view next section'href，因此一旦它被點擊，它將滾動到該div的頂部。然後，它會迭代，每次更新下一個ID的href，直到看到最後一部分，然後滾動回頂部。非常簡單。

唯一的問題是'節'是全屏圖像，所以它滾動到下一部分的頂部，如果您調整瀏覽器的大小，那部分的頂部位置（我們滾動到的部分）已經移動，並意味着職位丟失。

我創建了一個JSFiddle。你可以看到這發生在你點擊箭頭訪問下一部分然後調整窗口大小後，發生這種情況：http://jsfiddle.net/WFQ9t/3/

我想保持這個頂部位置固定在任何時候，所以即使你調整瀏覽器的大小，滾動位置是更新以反映這一點。

由於提前， [R

var firstSectionID = $('body .each-section').eq(1).attr('id'); 
$('.next-section').attr('href', '#' + firstSectionID); 

var i = 1; 
$('.next-section').click(function() { 

    var nextSectionID = $('body .each-section').eq(i).attr('id'); 
    i++; 
    $('.next-section').attr('href', '#' + nextSectionID); 

    var numberOfSections = $('body .each-section').length; 
    var lastSectionID = $('body .each-section').eq(numberOfSections).attr('id'); 

    if ($('.next-section').attr('href') == '#' + lastSectionID) { 
     $('.next-section').attr('href', '#introduction'); 
     i = 1; 
    } 

}); 

Answer 1

好了，請看看這個小提琴：http://jsfiddle.net/WFQ9t/9/

的幾件事情我做的有：

1. 提出了一些全局變量來處理屏幕編號（您正在使用哪個屏幕以及初始窗口高度），您將在屏幕加載時使用此功能，並且當您點擊.next-session箭頭。

   var initWinHeight = $(window).height(); 
   var numSection = 0; 
   

2. 然後我扔了這些變量到您的resizeContent()功能

   resizeContent(initWinHeight, numSection) 
   

   ，使其負載工作，並調整

3. 我做了圍繞它需要body舉動，以適應div的移動（我仍然不明白當正常的動畫發生時div會移動什麼）。

   $('body').css({ 
       top: (((windowHeight - initWinHeight)*numSection)*-1) + "px" 
   }); 
   

4. 然後在你點擊功能，然後加1段數，重置初始窗口的高度，然後又重置body到top:0。正常的動畫已經將下一部分放在頁面的頂部。

   numSection++; 
   initWinHeight = $(window).height(); 
   $('body').css({top:"0px"}, 1000); 
   

5. 最後，我重新當你到達最後一頁的numSections計數器（您可能必須做出的這個0而不是1）

   numSection = 0; 
   

小提琴擁有所有的這正確的地方，這些只是我用來改變代碼的步驟。

Answer 2

這裏是一個解決方案，我發現，但我不使用錨鏈接在這一點上，我使用類

這裏是我的HTML代碼：

<section class="section"> 
    Section 1 
</section> 

<section class="section"> 
    Section 2 
</section> 

<section class="section"> 
    Section 3 
</section> 

<section class="section"> 
    Section 4 
</section> 

這裏是我的jQuery/Javascript代碼， 我實際使用的preety簡單的方法：

$('.section').first().addClass('active'); 

/* handle the mousewheel event together with 
DOMMouseScroll to work on cross browser */ 
$(document).on('mousewheel DOMMouseScroll', function (e) { 
    e.preventDefault();//prevent the default mousewheel scrolling 
    var active = $('.section.active'); 
    //get the delta to determine the mousewheel scrol UP and DOWN 
    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1; 

    //if the delta value is negative, the user is scrolling down 
    if (delta < 0) { 
     next = active.next(); 
     //check if the next section exist and animate the anchoring 
     if (next.hasClass('section')) { 
      var timer = setTimeout(function() { 
       $('body, html').animate({ 
        scrollTop: next.offset().top 
       }, 800); 

       next.addClass('active') 
        .siblings().removeClass('active'); 

       clearTimeout(timer); 
      }, 200); 
     } 

    } else { 
     prev = active.prev(); 

     if (prev.length) { 
      var timer = setTimeout(function() { 
       $('body, html').animate({ 
        scrollTop: prev.offset().top 
       }, 800); 

       prev.addClass('active') 
        .siblings().removeClass('active'); 

       clearTimeout(timer); 
      }, 200); 
     } 

    } 
}); 


/*THE SIMPLE SOLUTION*/ 
$(window).resize(function(){ 
    var active = $('.section.active') 

    $('body, html').animate({ 
     scrollTop: active.offset().top 
    }, 10); 
});