jquery - ページの一番下までスクロールするjQuery

Question

特定のリンクをクリックすると、次のようにページの上部にスクロールします。

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

ページの一番下までスクロールする別のリンクを作成したいと考えています。以下は正常に動作しています。ページを 1000px 下にスクロールしようとするので、ページが短い場合は必要以上に速くスクロールし、ページが高い場合は一番下までスクロールしません。「1000」をウィンドウの高さに置き換えるにはどうすればよいですか? ありがとう

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

このコードがページの一番下にジャンプすることはわかっていますが、必要なようにスムーズにスクロールしません。

$(document).scrollTop($(document).height());

Answer 1

Answer 2

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>

Answer 3

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

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

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

Answer 4

非常に長い html ドキュメントの場合、 scrollTop:$(document).height() は失敗します。このような場合は、次を使用できます。

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

ページの最後に次のように入力します。

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

Answer 5

コードはスムーズにページの下部にジャンプします:

$(document).ready(function () {

$('#selector').click(function () { $('html, body').animate({ scrollTop: $(document).height() }, 1000); }); });

このコードを使用すると、ページを簡単に下にスクロールできます。

Answer 6

ページの一番下までスクロールするには、これを試してください：

        $('html, body').animate({
            scrollTop: $('html, body').height()
        }, 'slow');