windows.scrollBy增加一個固定值滾動到頂部

Question

我有這個功能，我使用它在我AngularJS指令。這個函數會滾動到頁面的頂部，但這不是我想要做的事情：我想讓它向上滾動400px或30％。

function scrollToTop() { 
    var scrollDuration = 500; 
    var scrollStep = -window.scrollY/(scrollDuration/15); 
    console.log(scrollStep); 

    var scrollInterval = setInterval(function() { 
     if (window.scrollY != 0) { 
      window.scrollBy(0, scrollStep); 
     } else { 
      clearInterval(scrollInterval); 
     } 
    }, 15); 
} 

我試圖改變scrollStep變量爲300或任何其他號碼，但我不能真正理解它。

Answer 1

總distanceToScroll是像素的任一個任意數（即400）或整個窗口滾動距離是否小於400。對於可以使用Math.min。 scrollStep的計算取決於distanceToScroll。您需要在setInterval中保留「迄今已滾動多少」的計數，可以將其稱爲distanceScrolled。繼續滾動，直到覆蓋distanceToScroll。

function scrollToTop() { 
 
    var scrollDuration = 500; 
 
    var stepDuration = 15; 
 
    
 
    var distanceToScroll = Math.min(400, window.scrollY); 
 
    
 
    var scrollStep = distanceToScroll/(scrollDuration/stepDuration); 
 
    console.log(scrollStep); 
 

 
    var distanceScrolled = 0; 
 

 
    var scrollInterval = setInterval(function() { 
 
     if (distanceScrolled < distanceToScroll) { 
 
      window.scrollBy(0, -1 * scrollStep); 
 
      distanceScrolled += scrollStep 
 
     } else { 
 
      clearInterval(scrollInterval); 
 
     } 
 
    }, stepDuration); 
 
} 
 

 
document.getElementById('btn').addEventListener('click', scrollToTop);

#very-high { 
 
    height: 3000px; 
 
} 
 

 
#btn { 
 
    position: fixed; 
 
    right: 10px; 
 
    top: 10px; 
 
}

<div id="very-high"></div> 
 
<button id="btn">Scroll</button>