Div 滚动栏滚动到指定的位置

最新推荐文章于 2024-08-20 16:39:34 发布
最新推荐文章于 2024-08-20 16:39:34 发布
阅读量329 收藏
点赞数
文章标签： xhtml javascript ViewUI 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="resource/jquery-1.9.1.min.js"></script>
</head>
<script type="text/javascript">
$(function(){
 //  $("#container").scrollTop($("#test5").scrollHeight ()); 不行
 
 $("#container").scrollTop($("#test4").offset().top)
   
});
</script>
<body style="text-align:center">


<!--
var div = document.getElementById('divDetail'); 


div.scrollTop = div.scrollHeight;  -->


   <div id="container" style="width:430px;height:300px;background:#00FF00;overflow:auto">
       <div  id="test1" style="width:400px;height:300px;background:#FFFFFF">
  </div>
        <div  id="test2" style="width:400px;height:300px;background:#000000">
  </div>
  <div  id="test3" style="width:400px;height:300px;background:#00FF00">
  </div>
  <div  id="test4" style="width:400px;height:300px;background:#0000FF">
  </div>
  <div  id="test5" style="width:400px;height:300px;background:#FFFF00">
  </div>
   </div>
</body>
</html>

评论例如以下：

       $("#container").scrollTop($("#test4").position().top + $("#container").scrollTop()) 

注意position和offset方法的差别。另外#container和#test4都须要设置定位方式，比方position:relative.

两个方法的定义。
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包括两个整形属性：top 和 left。此方法仅仅对可见元素有效。
position():
获取匹配元素相对父元素的偏移。

返回的对象包括两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法仅仅对可见元素有效。

  详情訪问：http://www.jb51.net/article/18340.htm



IE8 下，亲測可用

weixin_33697898
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现将div中滚动条滚动到指定位置的方法
10-21
主要介绍了jQuery实现将div中滚动条滚动到指定位置的方法,涉及jQuery结合animate方法动态操作页面元素属性的相关技巧,需要的朋友可以参考下
滚动条事件window.onscroll
weixin_30631587的博客
11-16 1724
获取页面某一元素的绝对X,Y坐标 varX = $('#ElementID').offset().top; varY = $('#ElementID').offset().left; 获取相对(父元素)位置: varX = $('#ElementID').position().top; varY = $('#ElementID').position().left; ...
将DIV的滚动条滚动到其子元素所在的位置
小白前端
05-21 726
今天做个手机的页面，左侧栏目点击，右侧滚动到指定的位置，记录下： .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.
让DIV的滚动条自动滚动到最底部的3种方法
热门推荐
最是人间留不住，朱颜辞镜花辞树。
02-20 2万+
方法一： 使用锚标记要滚动到的位置，然后通过click方法模拟点击滚动到锚所在位置 <script language="javascript1.2" type="text/javascript"> function onGetMessage(context) { msg.innerHTML+=context; msg_end.click(); } </script> <div style="width:500px;overflow:auto"> <div
jQuery实现将div的滚动条滚动到指定位置
10-27
在网页开发中，jQuery是一个非常...总的来说，通过jQuery的`animate()`方法，我们可以轻松地实现div滚动条的动态控制，为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
10-25
在Web开发过程中，有时候我们需要...综上所述，通过JQuery控制div滚动条滚动到指定位置的技术并不复杂，但要实现一个健壮、用户友好且兼容多种浏览器的自动定位功能，开发者需要对相关技术细节进行充分的测试和优化。
div滚动到指定位置 vue_Vue<点击导航栏滑动到指定位置>
weixin_39520775的博客
12-22 1734
效果图：assignBlock.gif方法1：v-for="(i,index) in 5"@click="goAssignBlock('block'+ index,50)":key="index">GO-{{index}}01234export default {methods: {//el 标签 speed 滚动速率 此处是50px 值越大滚动的越快goAssignBlock(el, s...
Jquery 滚动效果实现
流年轻逝
06-07 757
今天分享一个很实用的Jquery的滚动效果的代码，能够使用动画的和非动画，见代码： function scrollToLocation() { var messageList = $('#messageList'),//先获取到需要滚动的DIV scrollToContainer = messageList.find('li:last');//滚动到中类名为son-pan
js实现滚动条滚动到某个位置便自动定位某个tr
01-19
要实现带滚动条的table，定位到某个tr，其实是很简单的，只有几行js代码就可以完成，具体内容如下 js代码 <strong>[removed] function test(){ var $objTr = $(#location); //找到要定位的地方 tr $objTr.css(background-color,lightgray); //设置要定位地方的css var objTr = $objTr[0]; //转化为dom对象 $(#dataDiv).animate({scrollTop:objTr.of
js控制div内的滚动条的位置
weixin_43422861的博客
08-23 1599
<body> //d1是外层div，带滚动条 <div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'> <div style='height:500px;width:500px;background:yellow'>2222</div> </div> </body> <script> document
div中打开滚动条与设置滚动条位置
暄妍丶的博客
10-22 7810
div中打开滚动条与设置滚动条位置一、给div设置滚动条二、设置滚动条的位置通过锚点跳转设置scrollTop的值 当我们给div设置固定的高度或宽度的时候,超出的内容默认是不显示的.但是我们有将他们显示出来的需求,比如自己做一个,这时候我们就需要给div加上滚动条了 一、给div设置滚动条 我们只需要这么一行css代码 overflow: scroll; 如果我们只想添加高度滚动条,我们可以使用下面的语句 /*设置纵向滚动栏*/ overflow-x: scroll; /*设置横向滚动栏*/ overf
页面滚动条定位到指定位置
最新发布
dy1717的博客
08-20 190
页面滚动条定位到指定位置
div在有滚动条时固定在某个位置
果酱味奶糖的博客
05-16 549
这个属性会根据用户的滚动动作，将元素固定在某个位置。可能不被支持，因此可以添加浏览器前缀。要实现在有滚动条时固定。
jquery 页面滚动到指定DIV的代码
u012183378的专栏
10-02 846
以下代码实现： 页面滚动到指定DIV，看来用jquery实现还是很简单的。 代码：   复制代码代码示例: //参数id为页面元素id  function mScroll(id){ $("html,body").stop(true); $("html,body").animate({scrollTop: $("#"+id).offset().top}, 1000); }
简单易行--利用web现有DIV元素模拟滚动条.
KimYoo的专栏
11-08 2471
    首先声明这个办法不是我原创.但我在其他的地方没见到过,所以这里写出来大家共享.    web写多了有时候可能会用到单条的滚动条.怎么办?自己写一个吗?好麻烦,而且滚动条里面的滑块是动态变的.这里有一个简单的办法,用DIV来模拟.    关键原理:DIV里面的内容超出DIV的尺寸后,如果这个DIV设置的overflow是scroll,那么就会出现滚动条.好!滚动条你别动,我们就要你了.   
DIV内滚动条滚动到指定位置
weixin_34375233的博客
05-11 8824
相对浏览器，将指定div滚到到指定位置，其用法如下： $("html,body").animate({scrollTop: $(obj).offset().top},speed); ps:obj是需要定位的对象，speed是滚动的速度   然而如果需要相对某一个容器（称之div1），将其内部的div2滚动到相对div1的指定位置，用法如下： $("div1").animate({scroll...
关于浏览器（三） js 滚动条回到起始位置 方法可把内容滚动到指定的坐标。
jieweiwujie的博客
01-24 1721
scrollTo0() { let bodyWrapper = document.getElementsByClassName( "el-table__body-wrapper" ); if (bodyWrapper && bodyWrapper.length > 0) { for (let item of bodyWrapper) { item.scrollTo(0, 0); ...
div滚动到指定位置 vue
06-10
在Vue中，你可以通过以下步骤使一个 div 滚动到指定位置： 1. 给你想要滚动的 div 设置一个 ref 以便在组件中引用它。 ```html <div ref="scrollDiv">需要滚动的内容</div> ``` 2. 在需要滚动的时候，获取这个 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值