減速scrollTo（）函數

我希望頁面可以滾動到某一點，並逐漸慢到接近這一點。減速scrollTo（）函數

我想使用最多的回答下面這個問題（包括代碼），但我不認爲一個簡單的因素也有同樣的效果減速我想要實現： Changing the interval of SetInterval while it's running

function setDeceleratingTimeout(callback, factor, times) 
{ 
    var internalCallback = function(t, counter) 
    { 
    return function() 
    { 
     if (--t > 0) 
     { 
     window.setTimeout(internalCallback, ++counter * factor); 
     callback(); 
     } 
    } 
    }(times, 0); 

    window.setTimeout(internalCallback, factor); 
};

這裏的，我已經得到了工作在我的網站功能的字符串，雖然它不jsfiddle.com上班，我猜想，因爲它不是由一個網頁加載觸發：

function Scroll_01() 
{ 
    window.scrollTo(0,100) 
    setTimeout('Scroll_02()',25) 
} 
function Scroll_02() 
{ 
    window.scrollTo(0,136) 
    setTimeout('Scroll_03()',25) 
} 
function Scroll_03() 
{ 
    window.scrollTo(0,169) 
    setTimeout('Scroll_04()',25) 
} 
function Scroll_04() 
{ 
    window.scrollTo(0,188) 
    setTimeout('Scroll_05()',25) 
} 
function Scroll_05() 
{ 
    window.scrollTo(0,207) 
    setTimeout('Scroll_06()',25) 
} 
function Scroll_06() 
{ 
    window.scrollTo(0,221) 
    setTimeout('Scroll_07()',25) 
} 
function Scroll_07() 
{ 
    window.scrollTo(0,235) 
    setTimeout('Scroll_08()',25) 
} 
function Scroll_08() 
{ 
    window.scrollTo(0,245) 
    setTimeout('Scroll_09()',25) 
} 
function Scroll_09() 
{ 
    window.scrollTo(0,255) 
    setTimeout('Scroll_10()',25) 
} 
function Scroll_10() 
{ 
    window.scrollTo(0,262) 
    setTimeout('Scroll_11()',25) 
} 
function Scroll_11() 
{ 
    window.scrollTo(0,270) 
    setTimeout('Scroll_12()',25) 
} 
function Scroll_12() 
{ 
    window.scrollTo(0,277) 
    setTimeout('Scroll_13()',25) 
} 
function Scroll_13() 
{ 
    window.scrollTo(0,285) 
    setTimeout('Scroll_14()',25) 
} 
function Scroll_14() 
{ 
    window.scrollTo(0,288) 
    setTimeout('Scroll_15()',25) 
} 
function Scroll_15() 
{ 
    window.scrollTo(0,292) 
    setTimeout('Scroll_16()',25) 
} 
function Scroll_16() 
{ 
    window.scrollTo(0,294) 
    setTimeout('Scroll_17()',25) 
} 
function Scroll_17() 
{ 
    window.scrollTo(0,296) 
    setTimeout('Scroll_18()',25) 
} 
function Scroll_18() 
{ 
    window.scrollTo(0,298) 
    setTimeout('Scroll_19()',25) 
} 
function Scroll_19() 
{ 
    window.scrollTo(0,300) 
}

http://jsfiddle.net/8S3CL/

我想出了滾動到Y的訪問數字，通過將它們繪製在圖表上，100-300的數值試圖實現平滑的曲線，這種曲線運行良好，但顯然不是漂亮的代碼。

有人會知道什麼JavaScript代碼和公式可能會取代19菊花鏈功能？

來源

2014-03-26 user3092711

你有反對使用jQuery嗎？ – yitwail

@yitwail，根本不反對jQuery，我想jQuery會爲此構建一些東西。 – user3092711

您可以使用setTimeout通過遞歸調用來實現目標，根據當前位置和目標位置之間的距離調整滾動步長。

我創建了一個小提琴演示它here。

主要部分是遞歸調用：

function smoothScrollTo(targetY, step, intervalMs) { 
    ... 
    setTimeout(function() { smoothScrollTo(targetY, step, intervalMs); }, intervalMs); 
}

，並計算滾動步：

var sgn = Math.sign(targetY-currentY); 
var distance = Math.abs(currentY-targetY); 
var step1 = (distance < 100) ? Math.max(step*distance/50,1) : step; 
window.scrollTo(0, currentY+sgn*step1);

你應該改進這種方法雖然有一些問題來算：

驗證給定目標位置。
引入一個可選的回調，當滾動達到其目標時將調用該回調。
如果用戶在此平滑滾動期間滾動，該怎麼辦？使用目前的方法，JavaScript不會停止，並且即使用戶在期間滾動，也會想滾動到其目標。

來源

2014-03-26 19:06:12

謝謝，我喜歡代碼示例，但我想我需要使用符號，我不太明白這是如何工作或走到一起。我試過這樣的代碼： onload =「smoothScrollTo（300，20，25）;」，跳到300px，分20步，每次間隔25ms。我將四行計算代碼添加到了三個點的函數中，這些函數沒有滾動頁面，您認爲我做錯了什麼？ – user3092711

查看我在代碼片段之前提供的jsfiddle鏈接。在那裏你有完整的代碼，你可以在那裏測試，可能你錯過了。順便說一句，「step」是指每個週期滾動跳躍的像素，而不是總週期數。 –

我已經更新了小提琴的評論http://jsfiddle.net/7h2g3/5/ –

減速scrollTo（）函數

回答

相關問題