jQuery滾動到頁面底部

當您單擊某個鏈接時，使用以下命令滾動到頁面的頂部。jQuery滾動到頁面底部

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

我想製作另一個滾動到頁面底部的鏈接。以下工作正常。我認爲它會試着向頁面滾動1000px，所以如果頁面比較短，那麼它滾動得比它應該更快，並且如果頁面更高，那麼它不會一直走到底部。我怎樣才能用窗高來代替'1000'？由於

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

我知道這個代碼跳轉到頁面的底部，但它doenst平滑滾動，就像我需要：

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

來源

2012-11-27 Evans

你應該使用jQuery的寬鬆插件和傳似鞦韆參數，easein或easeout任何你喜歡的平穩過渡 – defau1t

只是一個提醒，在[目前接受的答案]（http://stackoverflow.com/a/13583503/383904）實際上是不正確的/不完整的（請參閱評論）。 –

您的需求以動畫和移動到文件底部可以通過下面的代碼

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>

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

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

參考至此鏈接

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

來源

2012-11-27 11:43:12

這是一個**不正確的示例**。雖然動畫底部** easing **沒有時間來正確完成（減速）錯誤的高度計算的原因 - 而是全速下降。 –

試試這個代碼

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

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

來源

2012-11-27 11:33:54 Hkachhia

它可以工作，但動畫速度是它應該的兩倍 – Evans

您需要減去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>

來源

2012-11-27 11:40:21

對於很長的HTML文檔 scrollTop的：$（文件）.height（）失敗，在這些情況下，您可以使用：

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

在頁面結束把一個：

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

來源

2014-07-19 17:27:15 surfealokesea

代碼跳轉到頁面的底部順利：

$（文件）。就緒（函數（）{

$（ '＃選擇'）。點擊（函數（）{ $（ 'HTML，身體'）。動畫（{ scrollTop的：$（document）.height（） }，1000）; }）; }）;

使用此代碼可以方便地向下滾動頁面。

來源

2014-09-11 11:21:36

要滾動到頁面底部試試這個：

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

來源

2017-11-21 10:10:26

jQuery滾動到頁面底部

回答

相關問題