jquery 滚动条处于最底部

已于 2022-02-10 16:45:26 修改
阅读量859 收藏
点赞数
分类专栏： # jQuery 文章标签： jquery
于 2021-11-18 09:17:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20869933/article/details/121393088
版权 

<html>
    <head>
    <script type="text/javascript" src="XXXXXXXXXXXXXXX/static/zln/js/jquery-1.7.2.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>
    
$("#div1").animate({scrollTop:$("#div1").prop("scrollHeight")}, 400);//0.4秒内滚到底部

荒~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现滚动条一直处于最底部
Joyce Luo的专栏
08-05 2万+
相信大家有时候在展示一些实时数据展示并且数据量很大的时候，因为无法在同一页面看到最有效的数据，所以我们需要将滚动条至于底部，以便我们看到最需要的数据和信息；这里很明显的例子那拿windows的ping来说吧，当我们长ping的时候，这时候数据会越来越多，而且还是累加的，新数据又全部在后面，所以这个时候让滚动条一直处于底部就大有作为了！ 大伙可以看一下，在windows的cmd中执行ping 地址
Jquery实现滚动到底部下一页，滚动到顶部上一页
infamousZry的博客
04-22 1949
Jquery实现滚动到底部下一页，滚动到顶部上一页的 1.前情提要： 项目中用了scrollBar.js设置滚动条样式，并在callback回调函数中实现获取下一页数据。 但是，现在滚动到顶部想获取上一页的数据，该怎么做呢？ 2.思路： 思路很简单，滚动到顶部，获取上一页数据；滚动到底部，获取下一页数据 3.预研难点 1）DOM 有scrollTop 但没有scrollBottom； 2）获取新数据后，滚动条一直处于底部，会多次调接口 4.代码 1）定义数据 page:1, // 分页 limit:10,
jQuery实现判断滚动条到底部
12-10
判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。 从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。 废话不多少说，赶紧上代码（兼容不同的浏览器）。 lazyload.js  //滚动条在Y轴上的滚动距离 function getScrollTop(){ 　　var
jquery让滚动条一直处于底端
java的涟漪
11-28 175
jquery让滚动条一直处于底端一直是困扰我的问题，用过很多jquery方法都没用，其实采用最原始的scrollHeight属性即可解决这个问题。 scrollHeight其实不是“滚动条的高度”，而是表示滚动条需要滚动的高度，即内部的高度! var item = "div" ; var e = document.getElementById(item); e...
Jquery　滚动条到底部
秋水的专栏
01-14 962
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度) var nScrollTop = 0; //滚动到的当前位置 var nDivHight = $("div.bDiv").height(); $("div.bDiv").scroll(function () { ...
jquery实现滚动条始终在底部，回到顶部
爱米酱的博客
08-21 321
//滚动条始终在底部 var scrollHeight = $('#div').prop("scrollHeight"); $('#div').animate({scrollTop:scrollHeight}, 400); //滚动条回到顶部 $('#div').animate({scrollTop:0},500);
jQuery - 将滚动条移动到最底部
qq_35928732的博客
06-15 2万+
jQuery 提供的 scrollTop() 方法，可以用来返回或设置匹配元素的滚动条的垂直位置。通过这个方法，配合获取到的 scrollHeight。我们可以将一个元素的滚动条移动到最底部。或者将整个页面滚动到最底部。1，效果图点击“移动到最底部”按钮后，上方的div就会将滚动条移动到最下面。2，样例代码&lt;html&gt; &lt;head&gt; &lt;script type="tex...
简单的jQuery页面滚动导航切换代码.zip
07-11
通过结合`$(this).scrollTop()`方法，我们可以获取到当前滚动条的位置。 2. **导航菜单项定位**：每个导航菜单项通常对应页面上的特定区域或“锚点”。通过设置HTML锚点链接（如`<a href="#section1">Section 1</a>...
jQuery滚动插件ScrollAdvance.zip
07-17
**jQuery滚动插件ScrollAdvance详解** ScrollAdvance是一款基于jQuery的高效滚动插件，它扩展了浏览器的默认滚动功能，提供了更多的交互方式和控制选项。这个插件的主要目标是帮助开发者在用户滚动页面时实现更丰富...
jQuery实现div浮动层跟随页面滚动效果
12-10
【jQuery实现div浮动层跟随页面滚动效果】 在网页设计中，有时我们需要创建一种效果，使得某个div元素（如广告栏、导航菜单等）在用户滚动页面时始终保持在屏幕的特定位置，这种效果被称为浮动层或漂浮层。jQuery库...
一个用jquery写的判断div滚动条到底部的方法【推荐】
10-22
下面小编就为大家带来一篇一个用jquery写的判断div滚动条到底部的方法【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
jQuery实现判断滚动条滚动到document底部的方法分析
10-16
主要介绍了jQuery实现判断滚动条滚动到document底部的方法,结合实例形式分析了jQuery事件响应及针对页面元素属性判断的相关操作技巧,需要的朋友可以参考下
jquery使滚动条滚动到最底部 scrollTop
zcc的博客
07-15 6479
需求：当div 中 内容过多出现滚动条时，让滚动条滚动到最下面。 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scrollHeight网页内容实际高度 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> .out-.
jquery如何让滚动条默认在最底部？
weixin_33766168的博客
10-25 275
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery 滚动条滚动到底部
acongshijia的专栏
10-10 1048
$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop
jquery将滚动条定位在内容底部方法
aadyf的博客
07-11 2096
jq滚动条定位在内容最底部
Jquery的 scroll事件，实现当滚动条到达最底部时，自动加载新项[转]
热门推荐
muzizhuben的专栏
11-05 2万+
Jquery的 scroll事件，实现当滚动条到达最底部时，自动加载新项 主题：使用 Jquery的 scroll事件，实现当滚动条到达最底部时，自动加载新项 原理：滚动条事件中，判断是否到达最底部，是的话调用添加方法，异步向尾部追加内容。 补充1：网上有找到一个此效果的网站：www.diandian.com        2：替代方案：QQ空间的好友动态中使用在最底部放置一个按钮，之后异
jQuery——滚动条底部显示
LOVE_HopeOne的博客
12-09 462
这里的 #content 代表的是带有滚动条的div，下面的代码实现了在有数据不团添加进去时滚动条一直在div底部的功能。  这里的这段代码需要放置在 动态添加数据的jQuery方法体里面。（为了保证每一次添加一次数据都要更改一下滚动条的位置）  $('#content').scrollTop($('#content')[0].scrollHeight); 实例： function...
jquery将滚动条保持在最底部的方法
最新发布
05-30
可以使用以下代码将滚动条保持在最底部： ```javascript var container = $('#container'); // 获取需要滚动的容器 ...此代码将使用 jQuery 获取到容器的 DOM 元素，然后将滚动条滚动到容器的底部。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值