jQuery - 将滚动条移动到最底部

jQuery 提供的  scrollTop() 方法,可以用来返回或设置匹配元素的滚动条的垂直位置。通过这个方法,配合获取到的  scrollHeight。我们可以将一个元素的滚动条移动到最底部。或者将整个页面滚动到最底部。

1,效果图
点击“移动到最底部”按钮后,上方的div就会将滚动条移动到最下面。
原文:jQuery - 将滚动条移动到最底部

2,样例代码

<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#btn1").click(function(){
      var scrollHeight = $('#div1').prop("scrollHeight");
      $('#div1').scrollTop(scrollHeight,200);
    });
  });
</script>
</head>
<body>
  <div id="div1" style="border:1px solid black;width:200px;height:200px;overflow:auto">
    第1行<br>第2行<br>第3行<br>第4行<br>第5行<br>
    第6行<br>第7行<br>第8行<br>第9行<br>第10行<br>
    第11行<br>第12行<br>第13行<br>第14行<br>第15行<br>
    第16行<br>第17行<br>第18行<br>第19行<br>第20行
  </div>
  <button id="btn1">移动到最底部</button>
</body>
</html>

原文出自:www.hangge.com  转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1360.html

3,添加过渡动画
上面样例点击按钮后,滚动条位置直接改变,会显得很生硬。我们可以使用  animate()  方法给其添加个滚动过渡的动画效果。
将按钮点击的相关代码改成如下。点击后,上面的  div  会逐渐滚动,直至移动到最底部(整个过程  400  毫秒)
$("#btn1").click(function(){
  var scrollHeight = $('#div1').prop("scrollHeight");
  $('#div1').animate({scrollTop:scrollHeight}, 400);
});

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值