打开页面div滚动条定位（别用锚点）

最新推荐文章于 2024-01-28 10:44:58 发布
最新推荐文章于 2024-01-28 10:44:58 发布
阅读量472 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：https://yq.aliyun.com/articles/540072
版权

打开页面div滚动条定位（别用锚点）



wKiom1jcsHCygTdUAABFInYNIsw241.png-wh_50

wKioL1jcsHGDrarqAABL43tnuTM537.png-wh_50





来啦！客官久等了！！！！！ 上代码：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<title>打开页面div滚动条定位</title>
<meta http-equiv= "Content-Type"  content= "text/html; charset=utf-8"  />
<script src= "jquery-1.8.2.min.js" ></script>
<script>
$(document).ready( function (){
     var  goTop = $( "#div-top" ).position().top;
     $( "#content" ).animate({scrollTop: goTop}, 0);
});
</script>
</head>
 
<body>
<div id= "content"  style= "width:300px;height:500px;background:#ccc;overflow:auto;" >
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"  id= "div-top" ><div style= "width:200px;height:50px;background:#ff0" >这里此时正在to  do  something</div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
<div style= "border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" ><div style= "width:200px;height:50px;background:#ff0" ></div></div>
</div>
</body>
</html>







营养成分：

animate() 方法执行 CSS 属性集的自定义动画。

position() 方法返回匹配元素相对于父元素的位置（偏移）。该方法返回的对象包含两个整型属性：top 和 left，以像素计



（The End）




   本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/1911771，如需转载请自行联系原作者






weixin_33807284
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 平滑滚动:scroll-behavior: smooth；锚点使用
jieweiwujie的博客
07-12 772
scroll-behavior: smooth；
html定位属性，锚点，滚动条
m0_45229352的博客
03-01 971
前段笔记，html定位属性
不用锚点也可以平滑滚动到页面的指定位置实现代码
12-12
不用锚点也可以平滑滚动到页面的指定位置 代码如下: <!DOCTYPE html> <html > <head> <meta content=”text/html; charset=utf-8″ /> <title>ScrollTo：平滑滚动到页面指定位置</title> <link rel=”stylesheet” type=”text/css” href=”../css/main.css” /> <style type=”text/css”> .nav{width:500px;margin:10px auto;} .nav li{float:left; width:100px; heig
定位DIV滚动条
weixin_34242658的博客
02-11 169
如果由于table中有一个下拉框，还有一个treeview时，treeview的所有节点都是取于下拉框的下拉选项来的，所以在第一定位这之后，当选择其他下拉框中其他的选项时，DIV的scrollTop值是会一直保存前一个步聚DIV滚动条所在的位置的&lt;body style="background: #EFF9FA" onscroll="onscrollform();" onload="formO...
不用锚点也可以平滑滚动到页面的指定位置
acongshijia的专栏
05-08 3134
不用锚点也可以平滑滚动到页面的指定位置 ScrollTo：平滑滚动到页面指定位置 .nav{width:500px;margin:10px auto;} .nav li{float:left; width:100px; height:24px; line-height:24px} .box{height:500px} .box h3{height:32px; line-h
滚动条锚点自动定位
april_4的博客
06-21 1633
如图： 点击海运出口，滚动条自动滚动到海运出口标题处 CSS部分： .slider-box { width:145px; float:left; overflow:hidden; font-size:13px; } .slider-box ul { list-style-type:none; overflow:hidden; } .slid
jQuery页面滚动显示浮动菜单栏锚点定位效果
09-08
jQuery页面滚动显示浮动菜单栏锚点定位效果
vue 中滚动条始终定位在底部的方法
10-18
在使用Vue框架开发前端页面时，经常需要处理列表滚动以及保持滚动条在特定位置的需求。例如，在聊天应用、实时消息显示或者日志查看等场景中，使滚动条保持在视图的底部，以便用户始终看到最新的内容，是非常常见的...
js是滚动条滑到固定位置_记 · 滚动条滚动到指定位置(锚点)的不同实现方式
weixin_35070219的博客
02-26 3236
最近项目中遇到传统的锚点问题。那什么是锚点问题呢？锚点 是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。并且可以对网站内容通过菜单进行快速定位。上图所示为锚点示意图，那这种需求我们怎么实现呢？下面我就来提供一些在不同场景下，可以使用的锚点方式。1.first blood在传统开发过程中，我们的锚点都是通过a标签跳转至对应ID的形式进行需求...
vue添加锚点,实现滚动页面时锚点添加相应的class操作
10-14
为了让内容区域可以滚动，需要设置`productDetail`类的CSS样式，确保它具有垂直滚动条： ```css .productDetail { width: 100%; height: 100%; /* 需要确保该div的父级也有高度 */ display: flex; flex-...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
09-01
在网页开发中，有时我们需要实现一个功能，使得页面中的某个具有滚动条的div元素自动滚动到最底部，以便用户能够即时查看新加载的内容，比如在实时聊天应用中。本文将介绍三种实现这一功能的方法。 方法一：使用锚...
记 · 滚动条滚动到指定位置(锚点)的不同实现方式
weixin_34253539的博客
05-08 2444
最近项目中遇到传统的锚点问题。那什么是锚点问题呢？ 锚点 是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。并且可以对网站内容通过菜单进行快速定位。 上图所示为锚点示意图，那这种需求我们怎么实现呢？下面我就来提供一些在不同场景下，可以使用的锚点方式。 1.first blood 在传统开发过程中，我们的锚点都是通过a标签跳转至对应ID的形...
锚点、滚动条状态同步问题处理
最新发布
fendouweiqian的博客
01-28 432
描点、滚动条持续滚动，相互之间状态问题
vant移动端实现tab锚点定位和tab随滚动条自动切换
m0_50441807的博客
07-02 5150
我们先实现锚点定位，锚点定位需要借助方法，这个方法会把当前元素的顶部定位到所在有滚动条的父元素的顶部，从而实现锚点定位的功能： 注：上面不一定要使用a标签来点击定位，其他标签的点击也是可以的，这里用是因为a标签自带点击的手势图标； 实现锚点定位并不难，只需要用方法，接下来要实现滚动条滚动到哪个元素的顶部，tab就对应切换； 下面先了解几个方法的区别：，， clientHeight：带有滚动条盒子的高度 scrollHeight：带有滚动条盒子里面的滚动内容的高度 scrollTop：滚动内容被卷入的高度
Div 垂直滚动条定位到子 Div 的位置
淼寒儿 的博客
04-08 3842
Div 垂直滚动条定位到子 Div 的位置Html 代码<html> /* 头部代码 */ <body> <div id="divBox"> <div id="test1"></div> <div id="test2"></div> <div id="test3"></div>
CSS进阶（11）—— overflow属性详解，利用CSS实现锚点定位
我不是水哥
12-01 6668
  本章延续上一章BFC的内容深入探索BFC的最佳结界——overflow在其本职工作上的表现。   1.overflow的裁剪界线——border-box   overflow属性用于指定块容器元素的内容溢出时的表现方式——滚动，裁剪，自适应。“BFC的最佳结界”只是其衍生出来的特性，“裁剪”才是其本职工作。在使用overflow做裁剪工作的时候需要注意裁剪的边界时border box的内...
如何在滚动的div中设置锚点
05-30
3. 使用CSS样式来设置div的滚动条样式，例如： ```css .scrollable { overflow-y: scroll; /* 显示垂直滚动条 */ height: 400px; /* 设置div的高度 */ } ``` 4. 最后，需要使用JavaScript来确保点击锚点链接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值