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跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...
随机推荐
- Delaunay三角剖分算法
在图像处理中,经常会使用到三角剖分算法: 具体定义及其算法可以参考:http://baike.so.com/doc/5447649.html 下面放出来代码: Delaunay接口为存C: 测试是使用 ...
- ZOJ 1654 二分匹配基础题
题意: 给你一副图, 有草地(*),空地(o)和墙(#),空地上可以放机器人, 机器人向上下左右4个方向开枪(枪不能穿墙),问你在所有机器人都不相互攻击的情况下能放的最多的机器人数. 思路:这是一类经 ...
- GMM的EM算法
在聚类算法K-Means, K-Medoids, GMM, Spectral clustering,Ncut一文中我们给出了GMM算法的基本模型与似然函数,在EM算法原理中对EM算法的实现与收敛性证明 ...
- c语言太easy笔误的,这将做
调试发现时间写的一样NB代码 test.c int add(string); int main() { char* p = "11222"; add(p); return 0; } ...
- Ajax改动购物车
1.购物车类的设计 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2hpeWVxaWFuZ2xkaA==/font/5a6L5L2T/fontsize/4 ...
- SVNKIT的SVNCommitClient的doMkDir的操作
package com.repositoryclient.svnoptions; import java.io.File; import org.tmatesoft.svn.core.SVNCommi ...
- C++ STL源代码学习之算法篇
///因为篇幅太长,因此,删去了非常多接口,仅仅分析了内部实现,算法对迭代器的要求也被删去 /// search. template <class _ForwardIter1, class _F ...
- H264相关随笔
DR(Instantaneous Decoding Refresh)--即时解码刷新. I和IDR帧都是使用帧内预测的.它们都是同一个东西而已,在编码和解码中为了方便,要首个I帧和其他I帧区别开,所以 ...
- C++基础学习教程(八)
转载请注明出处:http://blog.csdn.net/suool/article/details/38300117 引入 在进行下一步的学习之前,我们须要厘清几个概念. RAII 首先介绍一个编程 ...
- 大话设计模式C++达到-文章12章-外观模式
一.UML画画 关键词:添加Facade层. 二.概念 外观模式:为子系统中的一组接口提供一个一致的界面.此模式定义了一个高层接口,这个接口使得这一子系统更加easy使用. 三.说明 Q:外观模式在什 ...