自定義scrollTo函數

我正在做一個自定義scrollTo（）函數。我的功能是：自定義scrollTo函數

function scrollTo(wait, scroll, time) { 
    if (scroll == 'top' || scroll == 'Top') { 
     if (wait == 0) { 
      wait = 1; 
     } 
     $('html, body').delay(wait).animate({ 
      scrollTop: 0 
     }, time); 
    } 
    else if (scroll === 'bottom' || scroll == 'Bottom') { 
     time = time + 6000; 
     $('html, body').delay(wait).animate({ 
      scrollTop: 60000 
     }, time); 
    } 
    else { 
     $('html, body').delay(wait).animate({ 
      scrollTop: scroll 
     }, time); 
    } 
}

有了，我只是用非常快的HTML：

<div onclick="scrollTo(0, 'Bottom', 1500);">To Bottom</div> 

     <br><br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br> 
     br<br>br<br>br<br>br<br>br<br> 
     br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br 
     <br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br> 
     <br><br><br><br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br> 
     br<br>br<br>br<br>br<br>br<br> 
     br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br 
     <br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br> 
     <br><br> 

    <div onclick="scrollTo(0, 'Top', 1500);">Top</div>

問題： 當我點擊到下它向下滾動罰款，但後來當我點擊頂部它延遲很長時間纔會上升。我不知道爲什麼。

任何解決方案？

謝謝。

來源

2011-11-13 Shawn31313

不知道這個插件，但是你只設置了'wait = 1'來滾動到頂部。 – Smamatti

是的，因爲我看到它是否是.delay（等待）。別介意那個。 – Shawn31313

爲什麼你不只是採取解決方案的工程，並滿足您的需求，如[jQuery的滾動插件]（http://flesler.blogspot.com/2007/10/jqueryscrollto.html） – topek

你已經有了答案，但我想請你稍微修改代碼，這樣我就可以安然入睡。

function scrollTo(wait, scroll, time) { 
    var animatedScroll = function (lag, pixels, timeSpan) { 
     $('html, body').delay(lag).animate({ 
      scrollTop: pixels 
     }, timeSpan); 
    }, 
     scrollCmd = scroll.toLowerCase(); 

    switch (scrollCmd) { 
    case 'top': 
     animatedScroll(wait === 0 ? 1 : wait, 0, time); 
     break; 
    case 'bottom': 
     animatedScroll(wait, 60000, time + 6000); 
     break; 
    default: 
     animatedScroll(wait, scroll, time); 
    } 
}

來源

2011-11-13 21:36:29 Microfed

您的頁面不是真的60000像素長。當你點擊「To Bottom」時，它實際上會很快到達頁面的末尾，但它仍然在不可見的情況下進行動畫製作。然後當你點擊「To Top」時，它仍然以不可見的方式進行動畫製作，直到你達到真正的頁面高度，然後開始正常滾動。

來源

2011-11-13 21:21:27 Neil

您應該動畫到$('body').height()。目前瀏覽器太「熱忱」，並試圖向下滾動（60000可能「足夠大」，但它錯誤地計算動畫步驟，因爲頁面不是那麼高）。

另外，您在向下滾動時添加了6秒 - 這會使下一次點擊等待額外時間，因爲有一個動畫隊列按照添加動畫的順序執行動畫。

此外，請使用===並考慮將其全部歸納（您有三位幾乎全都相同的代碼）。

最後，我不知道爲什麼要延遲1毫秒的事情 - 它不明顯，它沒有任何目的（如果您通過0等待，我猜你也希望它不要等待）。

http://jsfiddle.net/67RBH/2/

function scrollTo(wait, scroll, time) { 
    var amount = scroll.toLowerCase(), 
     pixels = amount === "top" ? 0     : 
       amount === "bottom" ? $('body').height() : 
       scroll; 

    $('html, body').delay(wait).animate({ 
     scrollTop: pixels 
    }, time); 
}

來源

2011-11-13 21:25:00 pimvdb

自定義scrollTo函數

回答

相關問題