Div 滚动栏滚动到指定的位置
<!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 下,亲測可用
Div 滚动栏滚动到指定的位置的更多相关文章
- 如何通过JQuery将DIV的滚动条滚动到指定的位置
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...
- div:给div加滚动栏 div的滚动栏设置
今天做了个样例: div 的滚动栏问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;”>& ...
- scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置
scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...
- Android ListView滚动到指定的位置
这篇文章主要给大家介绍了Android中的ListView如何滚动到指定的位置,文章给出了两种解决的方法,并给出详细的示例代码,相信会对大家的理解和学习很有帮助,有需要的朋友们下面来一起看看吧. 本文 ...
- [RN] React Native 滚动跳转到指定位置
React Native 滚动跳转到指定位置 一.结构 <ScrollView horizontal={true} ref={(view) => { this.myScrollView = ...
- JS控制div跳转到指定的位置的解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...
- 滚动栏范围位置函数(SetScrollRange、SetScrollPos、GetScrollRange、GetScrollPos)
滚动栏的范围是一对整数,默认情况下,滚动栏的范围是0~100. SetScrollRange(hwnd,iBar,iMin,iMax,bRedraw)这里的iBar參数要么是SB_VERT,要么是SB ...
- html中滚动栏的样式
DIV滚动栏设置 (CSS)2008/09/26 03:07div 中滚动栏的控制2008年01月06日 星期日 01:181)隐藏滚动栏<body style="overflow-x ...
- JS控制div跳转到指定的位置的几种解决方案总结
原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...
随机推荐
- HDU 3473 Minimum Sum (划分树)
题意:给定一个数组,有Q次的询问,每次询问的格式为(l,r),表示求区间中一个数x,使得sum = sigma|x - xi|最小(i在[l,r]之间),输出最小的sum. 思路:本题一定是要O(nl ...
- 利用未公开API获取终端会话闲置时间(Idle Time)和登入时间(Logon Time)
利用未公开API获取终端会话闲置时间(Idle Time)和登入时间(Logon Time)作者:Tuuzed(土仔) 发表于:2008年3月3日23:12:38 版权声明:可以任意转载,转载时请 ...
- 一个发送邮件的C++库–jwsmtp
接收邮件的,暂时没搞定,不过在SF上找到了这个发送邮件的库文件.它提供了一个比较完整的类,可以简单的调用发送邮件.下面是作者提供的一个例子,不过由于连SMTP发邮件需要密码,所以代码我改了一下.// ...
- [置顶] 页面缓存,cache,设置缓存过期时间,OutputCache
页面缓存 方法一: protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //缓存有数据 if (Cach ...
- IE与FF脚本兼容性问题
(1) window.event: 表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象 (2) 获取事件源 IE用srcElement获取事件源,而FF用target获取 ...
- 算法起步之动态规划LCS
原文:算法起步之动态规划LCS 前一篇文章我们了解了什么是动态规划问题,这里我们再来看动态规划另一个经典问题,最长公共子序列问题(LCS),什么是子序列,我们定义:一个给定序列将其中的0个或者多个元素 ...
- 无向图的最短路径算法JAVA实现(转)
一,问题描述 给出一个无向图,指定无向图中某个顶点作为源点.求出图中所有顶点到源点的最短路径. 无向图的最短路径其实是源点到该顶点的最少边的数目. 本文假设图的信息保存在文件中,通过读取文件来构造图. ...
- BAT笔试试题常见试题总结含答案(持续更新。。。)
(1)试题例如以下: class A { int a; short b; int c; char d; }; class B { double a; short b; int c; char d; } ...
- 每日一小练——高速Fibonacci数算法
上得厅堂,下得厨房,写得代码,翻得围墙,欢迎来到睿不可挡的每日一小练! 题目:高速Fibonacci数算法 内容:先说说Fibonacci数列,它的定义是数列:f1,f2....fn有例如以下规律: ...
- Codeforces 196 C. Paint Tree
分治.选最左上的点分给根.剩下的极角排序后递归 C. Paint Tree time limit per test 2 seconds memory limit per test 256 megaby ...