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滚动到页面底部

回答

相关问题