2012-11-27 7 views
13

私は特定のリンクをクリックすると、ページの上部にスクロールするために、次を使用しています。jQueryスクロールページの下に

$('.myLinkToTop').click(function() { 
    $('html, body').animate({scrollTop:0}, 'slow'); 
    return false; 
}); 

ページの下部にスクロールする別のリンクを作成したいとします。以下は正常に動作しています。私はそれがページの下に1000pxをスクロールしようとしていると思うので、もしページが短ければ、それはすべきであるよりも速くスクロールし、ページが背の高いならば、 '1000'をウィンドウの高さに置き換えるにはどうすればいいですか?

あなたがする必要がある
$(document).scrollTop($(document).height()); 
+0

をスイングなどのパラメータを渡すには、easeinまたはeaseoutあなたはスムーズな移行 – defau1t

+0

のためだけでリマインダーを好き、[現在受け入れられている回答](http://stackoverflow.com/a/13583503/383904)は実際には間違っている/不完全です(コメントを参照)。 –

答えて

31

アニメーションや文書の末尾に移動するにはあなたの要件は

HTMLの下のコードで

<html> 
<head> 
</head> 
<body> 
    <div style="height:1500px"> 
     <button class="myLinkToTop" id="but1" >1</button> 
    </div> 
     <button class="myMenuLink" id="but1" >2</button> 
</body> 
</html> 

JS

$('.myLinkToTop').click(function() { 
    $('html, body').animate({ 
     scrollTop: $(document).height() 
    }, 'slow'); 
    return false; 
}); 

$('.myMenuLink').click(function() { 
    $('html, body').animate({ 
     scrollTop:0 
    }, 'slow'); 
    return false; 
}); 

を達成することができます参照してください。にページの終わり

$('html, body').animate({ 
    scrollTop: $('#endOfPage').offset().top 
}, 1000); 

:このリンク

非常に長いHTMLドキュメントの場合

http://jsfiddle.net/q6Wsp/6/

+1

これは**間違った例です**。ボトムにアニメーションを付けると**イージング**に間違った高さの計算が原因で正常に終了(スローダウン)する時間がなく、その代わりに完全な速度でボトムに当たっています。 –

4

このコードを試してみてください

$(function() { 
    $('#scrlBotm').click(function() { 
     $('html, body').animate({ 
      scrollTop: $(document).height() 
     }, 
     1500); 
     return false; 
    }); 

    $('#scrlTop').click(function() { 
     $('html, body').animate({ 
      scrollTop: '0px' 
     }, 
     1500); 
     return false; 
    }); 
}); 
+0

アニメーションは動作しますが、アニメーションは2倍速くなります。 – Evans

8

:私はこのコードは、ページの一番下にジャンプし、それは私が必要のようにスムーズにスクロールdoenstことを知っているおかげ

$('.myMenuLink').click(function() { 
    $('html, body').animate({scrollTop:1000}, 'slow'); 
    return false; 
}); 

scrollHeightからビューポートの高さを引く:

$('#goToBottom').click(function(){ 
 

 
    var WH = $(window).height(); 
 
    var SH = $('body').prop("scrollHeight"); 
 
    $('html, body').stop().animate({scrollTop: SH-WH}, 1000); 
 

 
});
body{height:2000px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="goToBottom">GO TO BOTTOM</button>

3

scrollTopスプライト:$(ドキュメント).height()が失敗し、あなたが使用することができ、これらの例で 置く:

<div id="endOfPage">&nbsp;</div> 
1

コードスムーズに:

$(ドキュメント).ready(関数(){

$( '#セレクタ')。(関数(){ $( 'htmlの、ボディ')をクリックします。アニメーション({ scrollTopスプライト:$(document).height() }、1000); }); });

このコードを使用すると、ページをスクロールしやすくなります。この試すページの一番下までスクロールする

0

:あなたがプラグインを容易にjQueryを使用する必要があり

 $('html, body').animate({ 
      scrollTop: $('html, body').height() 
     }, 'slow'); 
関連する問題