滚动条滚动到指定位置

最新推荐文章于 2024-07-11 16:03:41 发布
最新推荐文章于 2024-07-11 16:03:41 发布
阅读量7.3k 收藏 3
点赞数 1
分类专栏： ztree
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#containder{
          margin-top: 0px;
              height: 250px;
              overflow-y: scroll;
              overflow-x: auto;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
scrollToLocation();
});
function scrollToLocation() {
  var mainContainer = $('#thisMainPanel'),
  scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处


  //动画效果
  mainContainer.animate({
    scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
  }, 50);//2秒滑动到指定位置
}
</script>
</head>
<body>


<div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">
    <div class="son-panel">我是类容区域-1</div>
    <div class="son-panel">我是类容区域-2</div>
    <div class="son-panel">我是类容区域-3</div>
    <div class="son-panel">我是类容区域-4</div>
    <div class="son-panel" style="height:160px;">我是类容区域-5</div>
    <div class="son-panel">我是类容区域-6</div>
    <div class="son-panel">我是类容区域-7</div>
    <div class="son-panel">我是类容区域-8</div>
</div>
</body>

</html>


如果是ztree中，直接

u010513603
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
滚动到指定位置 scroll()
qq_40930251的博客
03-28 789
这里是引用 <div class="con"> <div class="top"> 　　　　上部分内容<br> 　　　　上部分内容<br> 　　　　上部分内容<br> 　　　　上部分内容<br> 　　　　上部分内容<br> 　　　　上部分内容<br> 　　　　上部分内...
滚动页面到指定位置实现
qq_26715417的博客
05-14 558
scrollTop 滚动到某位置 document.documentElement.scrollTop = 0 scrollTo，scrollBy，scroll滚动到某位置 this.$refs.DOM.scrollTo(0, 200) scrollIntoView() 实现滚动到具体某元素 document.getElementById('invoice-form').scrollIntoView()
overflow:scroll的使用中滚动条固定在最新的数据的位置
doudou15203211327的博客
08-16 1312
当页面刷新到一个新的页面的时候，假如存在关于信息的滚动条，多数时候我们会要求数据展示的是最新的。关于ref属性是可以获取vue中的dom元素并且对相应标签进行操作。使用方法：this.$refs.ref的内容。.........
在react内,如何实现点击某按钮后div盒子内的横向滚动条向左或向右滑动
最新发布
weixin_50236973的博客
07-11 179
在react内,如何实现点击某按钮后div盒子内的横向滚动条向左或向右滑动
设置overflow-x: auto如何让其内容滚动到指定位置
qq_43053533的博客
11-16 4379
需求： 当给父元素设置overflow-x: auto后，需要它的选中了的子元素滚动到当前位置显示。 图一为第一个子元素的内容，图二为效果图。 实现： 首先获得需要滚动的元素距离父元素的位置，.resources_x[file="'+resource_id+'"]为蓝色的块元素，是resources_cont的子元素。 data = $('.resources_cont').find('.resources_x[file="'+resource_id+'"]').position().left 然后设
【JS】设置滚动属性默认自动滚动到底部（overflow:scroll；）
qq_45677671的博客
07-19 4290
设置滚动属性默认自动滚动到底部，及应用场景案例（实现对话功能）
滚动条的设置
weixin_44543307的博客
05-26 2904
滚动条的设置 开发工具与关键技术：DW、VS CSS 作者：木林森 撰写时间：2019年5月25日 在浏览网页的时候，很多细心的网友就会发现我们网页有时候会出现滚动条，大部分是垂直滚动条，而很少会出现水平滚动条。为什么会这样呢？ 其实这是为了美观，标准的网页中是不会有水平滚动条的。除非你浏览器页面的缩放比例小于100%的时候不会出现滚动条，当它大于100%的时候就会出现滚动条了。调节页面缩放比例...
js将滚动条滚动到指定位置的简单实现方法
10-22
首先，我们要明白滚动条滚动到指定位置的基本原理。在HTML中，我们可以使用`id`属性来标识页面上的特定元素，例如`天一广场</span>`。JavaScript可以通过`document.getElementById()`方法获取到这个元素，然后利用`...
jQuery实现将div中滚动条滚动到指定位置的方法
10-21
### jQuery实现将div中滚动条滚动到指定位置的方法知识点总结 #### jQuery的滚动方法概述 在Web开发中，经常需要对页面元素进行动态操作，其中一项常见的需求是实现滚动条滚动到指定位置的效果。使用jQuery可以...
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
10-17
在本文中，我们探讨了如何使用Vue框架实现滚动条滚动到指定位置时，页面上的数字进行tween动画特效。tween动画是一种在两个值之间创建平滑过渡效果的动画技术。Vue作为一个流行的前端框架，提供了丰富的功能来实现...
jQuery实现将div的滚动条滚动到指定位置
10-27
要实现将div的滚动条滚动到指定位置，我们可以使用jQuery的`animate()`方法。`animate()`方法允许我们创建平滑的动画效果，包括改变滚动位置。下面是一个简单的示例代码： ```html <!DOCTYPE html> <title>...
css overflow 与锚点定位
w15228212327_cc的博客
12-09 687
长文警告！！！ 锚点，通俗点的解释就是可以让页面定位到某个位置的点。其在高度较高的页面中经常见 到，如百度百科页面中标题条目的快速定位效果，如图 1 所示。点击其中任意一个标题链接， 比如说“发展历程”，页面就会快速定位到“发展历程”这一块内容，同时地址栏中的 URL 地 址最后多了一个#1，如图 2 所示。 我所知道的基于 URL 地址的锚链（如上面的#1，可以使用 location.hash 获取）实现 锚点跳转的方法有两种，一种是<a>标签以及 name 属性，还有一种就是使用
overflow 监听是否滑动到底部
唐僧的专栏
05-18 1552
overflow 监听是否滑动到底部
echarts 常见问题（增加滚动条、X轴文本数据太长、字体颜色、标签对齐方式、循环颜色、图表位置）
m0_38082271的博客
06-08 5773
echarts 常见问题（增加滚动条、X轴文本数据太长、字体颜色、标签对齐方式、循环颜色、图表位置）
使用scrollTo/scrollTop让页面元素滚动到指定位置, 并设置滚动动画
灰色头像@的博客
03-07 5218
当容器有滚动条时,有时需要点击 或 将页面滚动到指定元素位置比如父元素设置了 ,当元素里的内容超过元素本身的高度时, 就会出现滚动条, 那么鼠标滑动的距离就是其滚动距离. 如何设置滚动 scrollTop属性 就是指 “元素中的内容” 超出 “元素上边界” 的那部分的高度。 直接给父元素的scrollTop赋值: 这种方法比较直接, 但是因为是直接设置的dom元素的js属性 而不是css属性, 所以想通过这种方法设置过渡动画是没有效果的(transition: all 1s linear; 无效)补充: 有
js 实现滚动条(随内容自动滚动到底部)
热门推荐
小心仔的博客
07-24 1万+
style=“width: 1200px;height: 600px; overflow-y:scroll” style=“width: 1200px;height: 600px; overflow:scroll”
将DIV的滚动条滚动到其子元素所在的位置
小白前端
05-21 718
今天做个手机的页面，左侧栏目点击，右侧滚动到指定的位置，记录下： .page { max-width: 6.4rem; min-width: 3.2rem; margin: 0 auto; background-color: antiquewhite; display: flex; height: 100vh; } .lft { width: 2rem; overflow-y: auto; background-color: #ccc; box-sizing: border-box.
echarts的X轴添加滚动条及滚动条缩放
weixin_43773218的博客
06-13 4663
给x轴添加滚动条，滚动条添加缩放功能，即随着鼠标滚轮的滚动，滚动条的长度也会随之变化
设置滚动条位置
wq105032007067的专栏
04-27 933
如果滚动条位置快到底部了，滚动条位置向下滚动260，可用于div的展开和收缩 针对整个窗口： var scrolly = document.body.scrollTop;     //alert(document.body.scrollTop + " " +document.body.scrollHeight)     if(document.body.scrollTop + 80
vue横向滚动条滚动到指定位置
10-10
以下是实现横向滚动条滚动到指定位置的示例代码： ```vue <!-- 横向滚动内容 --> export default { mounted() { // 获取滚动容器的引用 const container = this.$refs.scrollContainer; // 设置滚动条...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值