html 5 设置滚动条至底部

最新推荐文章于 2023-03-30 15:50:37 发布
最新推荐文章于 2023-03-30 15:50:37 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： 笔记 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40254430/article/details/122276326
版权 
<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>页面滚动到最底部</title>

<meta>

<script type="text/javascript" src="./public/js/jquery-3.5.1.min.js"></script>



<link rel="stylesheet" href="./public/css/public.css">

<link rel="stylesheet" href="./public/css/bootstrap.min.css">

<style>

   .container{

       margin-top:100px;

       width:100%;

       height:500px;

       border:1px solid #ccc;

       overflow:auto;

   }

   .item{

       width:100%;

       height:200px;

       border:1px solid #ccc;

   }

   .btn{

       width:80px;

       padding:20px;

       border:none;

       outline:none;

       background:#eb4450;

       color:#fff;

       margin:20px;

   }

</style>

</head>

    <body>

         

        <button class="btn"  id="addEle">添加</button>

       <div class="container" id="container">

           <div class="item"></div>

           <div class="item"></div>

           <div class="item"></div>

           <div class="item"></div>

       </div>

        <script    type="text/javascript">

           $(function(){

              $("#addEle").click(()=>{

                  let ele = document.createElement("div");

                  let container= document.getElementById("container")

                  ele.classList.add("item");

                  $(".container").append(ele); //scrollIntoView 是让父元素滚动到最底部  

                  ele.scrollIntoView();

              })

           })

    </script>

    </body>

</html>

ktuor
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【html+js】滚动至页面最底端
栀妹儿的炼丹炉
05-26 924
点击按钮滚动至页面最底端、最顶端、指定位置
div滚动条自动滚动到底部
weixin_40444253的博客
08-26 635
div滚动条自动滚动到底部
vue3 h5进入页面后自动滚动到底部
qq_58340302的博客
03-30 2779
在做h5项目中的聊天页面时，需求是进入页面自动滚到底部，方便用户看到最新消息（因为消息是正序排列的，最新消息自然展示在底部）。
让DIV的滚动条自动滚动到最底部scrollTop
一位前行者的博客
08-12 1818
制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。 聊天程序是基于websocket设计的，消息容器是一个DIV，所以问题就在于如何控制DIV的滚动条。 这里推荐一个好用的一个平台（如流）： http://hi.baidu.com/chen1345789/blog/item/de727bfb45587b176d22eba1.html 让滚动条自动有新信息滚动到底部首先请求websocket // test 是vue里封装的axios请求--params为带参 t
el-table 横向滚动条固定在可视窗口底部
ZMJ_QQ的博客
04-21 3万+
有一个需求,当el-table的宽度超出浏览器宽度时，虽然el_table底部会出现滚动条，但是每次需要先滚动到底部，才能使用el-table的滚动体，很是麻烦。因此当el_table的宽度超出屏幕宽度时，要在可视范围底部添加一个横向的滚动条，在网上找了四篇不同方法，全都试了一遍，四个方法的原文地址以及效果图我都贴出来了，看个人选择了，我自己用的第二个，一个大佬写的。...
HTML控制div滚轮在最下面
liu_131421的博客
11-09 564
HTML控制div滚轮在最下面
jQuery实现判断滚动条滚动到document底部的方法分析
10-16
判断滚动条到达底部的基本逻辑是，当滚动条滚动的高度加上视口的高度等于或超过文档总高度时，说明滚动条已经滚动到底部。公式表示为：`滚动条滚动的高度 + 浏览器视口的高度 >= 文档的高度`。 以下是使用纯...
移动端html5判断是否滚动到底部并且下拉加载
12-14
只读属性,高度包括所有内容，包含内边距，但不把水平滚动条、边框和外边距算在内。 clientHeight 也是只读属性，没有定义CSS或者内联布局盒子的元素为0,它是元素内部的高度，包含内边距，不包括x轴的滚动条高度、...
vue进入页面时滚动条始终在底部代码实例
10-17
`scrollTop`属性设置为`scrollHeight`，这会使滚动条滚动到底部。 对于滚动条的样式，我们可以使用CSS来自定义。例如： ```css ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track-...
做聊天工具的时候滚动条保持在最底部
09-30
开发聊天程序，我们需要将将滚动条保持在最底部，比如聊天窗口，最新发出和收到的信息要显示在最下方，如果要看到最下方的内容，就必须保证滚动条保持在最底部。
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
11-23
要制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。 聊天程序是基于AJAX设计的，没有用框架，消息容器是一个DIV，所以问题就在于如何控制DIV的滚动条。 但同样的代码拿到我这里却完全失效，又仔细查了下资料说XHTML标准下scrollTop的值恒为0，解决办法是使用 document.documentElement.scrollTop代替document.body.scrollTop，讲了半天所解决的是整个页 面的滚动条。这个方法我是用不了了，因为不是框架结构，所以不可能用body的滚动条控制浏览信息。 网上关于这个问题的资料很少，连CSDN上也
实现div内部滚动条滚动到底部和顶部的代码
08-28
"实现div内部滚动条滚动到底部和顶部的代码" 在Web开发中，实现div内部滚动条滚动到底部和顶部是非常常见的需求。今天，我们将分享一个简洁的代码，用于实现div内部滚动条滚动到底部和顶部的功能。 代码分析 首先...
html div 滚动条自动扩充,让DIV的滚动条自动滚动到最底部的3种方法(推荐)
weixin_36251052的博客
05-31 1247
要制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。聊天程序是基于AJAX设计的，没有用框架，消息容器是一个DIV，所以问题就在于如何控制DIV的滚动条。但同样的代码拿到我这里却完全失效，又仔细查了下资料说XHTML标准下scrollTop的值恒为0，解决办法是使用 document.documentElement.scrollTop代替document...
html 到底部自动,html页面滚动到底部执行
weixin_39968760的博客
06-02 362
functiongetScrollTop(){varscrollTop=0,bodyScrollTop=0,documentScrollTop=0;if(document.body){bodyScrollTop=document.body.scrollTop;}if(document.documentElement){documentScrollTop=document...
JS滑动到页面顶部（或底部）
热门推荐
xiaopeng_han123的博客
05-24 4万+
window.scrollTo(0, document.documentElement.clientHeight);
html将按钮固定到页面底部，滑动到底部时消失
weixin_43961652的博客
03-29 1061
需求：一个比较长的页面，其操作按钮在最底部，每次要操作按钮都要把滚动条下拉。想将按钮固定在页面的下方，滚动到底部的时候这个按钮消失。
html 滚动条处于页面底部,滚动条一直置于页面底部,开发聊天程序须知。
weixin_35747785的博客
06-04 1457
有些时候(如开发聊天程序)，我们需要将将滚动条(scrollbar)保持在最底部，比如聊天窗口，最新发出和收到的信息要显示在最下方，如果要看到最下方的内容，就必须保证滚动条保持在最底部。htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d...
H5端滚动到底部加载数据
我爱学习的博客
02-14 808
h5 滚动到底部加载更多数据，滚动到底部懒加载
html页面滚动到底部，解决抖动问题
PsArvin的专栏
10-19 633
解决页面抖动问题
html 滚动条保持底部 css
最新发布
09-08
要实现让滚动条一直保持在底部，可以通过CSS和JavaScript来实现。 首先，在HTML文档中需要有一个包含内容的容器，例如一个div元素。给这个div元素添加一个id，方便通过JavaScript操作。 然后，在CSS中给这个容器设置样式，并使用overflow属性来控制当内容超出容器时是否显示滚动条。设置overflow属性为"auto"可以在需要时显示滚动条。 接下来，在JavaScript中使用DOM操作获取到这个容器的元素，然后使用scrollTop属性设置滚动条的位置为容器的高度，这样就能一直保持滚动条在底部。 示例代码如下： HTML: ```html <div id="content-container"> <!-- 这里是内容 --> </div> ``` CSS: ```css #content-container { height: 200px; /* 设置容器的高度 */ overflow: auto; /* 当内容超出容器时显示滚动条 */ } ``` JavaScript: ```javascript const contentContainer = document.getElementById('content-container'); contentContainer.scrollTop = contentContainer.scrollHeight; // 将滚动条位置设置为容器的高度 ``` 以上代码会使滚动条始终保持在底部，无论是在页面加载完成后还是在内容发生变化时。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值