カスタムscrollTo関数

Question

私はカスタムscrollTo（）関数を作成しています。 My機能は次のとおりです。

<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> 

問題：私はボトムへをクリックすると それは私その後、罰金を下にスクロールし、私は本当に速い使用HTMLで

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); 
    } 
} 

をクリックしてください。これは、実際には上に行くまでにかなり遅れています。私はなぜか分からない。

すべてのソリューション？

ありがとうございました。

Answer 1

あなたはすでに答えを持っているが、私は少しのコードを変更することをお願いしたいと思いますので、私は静かに眠りことができます。

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); 
    } 
} 

Answer 2

あなたのページは実際60000ピクセルではありません。 「To Bottom」をクリックすると、実際にはページの終わりに達しますが、実際には目に見えない形でアニメーション化されています。その後、「To Top」をクリックすると、実際のページの高さに達するまで、目に見えないようにアニメーション化されます。その時点で、スクロールが正常に開始されます。

Answer 3

$('body').height()にアニメーションする必要があります。現在のところ、ブラウザはあまりにも「熱心」で、さらにスクロールしようとします（60000は「十分に大きいかもしれませんが、ページがそれほど高くないので、アニメーションのステップが間違って計算されます）。

さらに、アニメーションを追加する順番にアニメーションを実行するアニメーションキューがあるので、スクロールダウンすると6秒追加されます。

また、===を使用し、すべてを一般化することを検討してください（ほとんどすべて同じ3ビットのコードがあります）。

最後に、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); 
}