<!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 滚动栏滚动到指定的位置的更多相关文章

  1. 如何通过JQuery将DIV的滚动条滚动到指定的位置

    这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...

  2. div:给div加滚动栏 div的滚动栏设置

    今天做了个样例: div 的滚动栏问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;”>& ...

  3. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

  4. Android ListView滚动到指定的位置

    这篇文章主要给大家介绍了Android中的ListView如何滚动到指定的位置,文章给出了两种解决的方法,并给出详细的示例代码,相信会对大家的理解和学习很有帮助,有需要的朋友们下面来一起看看吧. 本文 ...

  5. [RN] React Native 滚动跳转到指定位置

    React Native 滚动跳转到指定位置 一.结构 <ScrollView horizontal={true} ref={(view) => { this.myScrollView = ...

  6. JS控制div跳转到指定的位置的解决方案总结

    总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...

  7. 滚动栏范围位置函数(SetScrollRange、SetScrollPos、GetScrollRange、GetScrollPos)

    滚动栏的范围是一对整数,默认情况下,滚动栏的范围是0~100. SetScrollRange(hwnd,iBar,iMin,iMax,bRedraw)这里的iBar參数要么是SB_VERT,要么是SB ...

  8. html中滚动栏的样式

    DIV滚动栏设置 (CSS)2008/09/26 03:07div 中滚动栏的控制2008年01月06日 星期日 01:181)隐藏滚动栏<body style="overflow-x ...

  9. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

随机推荐

  1. Automatic logon configuration on Linux OS

    Automatic logon configuration on Linux OS 1. Regarding to DSA: a) ssh-keygen -t dsa  b) cat ~/.ssh/i ...

  2. 广东省-IT公司红黑榜排名

    红榜Top100 Order Company Name Point Change  1 百富计算机技术(深圳)有限公司  94.00 --  2 中国网通广州分公司  88.00 --  3 深圳市汇 ...

  3. 辛星PHP教程之yii和ci教程已经写完,望与朋友们交流

     记得有个朋友给我说,你写的PHP框架是不是过于少了.我感觉仅仅有一个thinkphp确实不好,于是就又写了下yii和ci的教程,事实上我之前是研究过这两个框架的,因此写起来也还算得心应手吧.估计接下 ...

  4. 在WPF的WebBrowser控件中抑制脚本错误

    原文:在WPF的WebBrowser控件中抑制脚本错误 今天用WPF的WebBrowser控件的时候,发现其竟然没有ScriptErrorsSuppressed属性,导致其到处乱弹脚本错误的对话框,在 ...

  5. [Cocos2d-x]Mac下运行HelloCpp For Android

    2013年12月22日 一.简介: Mac下运行Cocos2d-x的samples和新建的HelloCocos2dx项目 二.内容: 环境: OS:mac OS X 10.9.1 IDE:Androi ...

  6. 推荐一个IT人必备的东西【用过的都懂,让我们的环境越来越好吧】

    有个东西叫IT人手册,不知道各位有用过吗?不过很可惜以前那个关掉了,那个网站说出了我们IT人太多的新声以及一些黑心公司,不过被迫压力下关闭了 我不是托,我只是分享 我觉得这种东西应该存在下去~!!!至 ...

  7. weblogic环境,应用上传图片报Could not initialize class sun.awt.X11.XToolkit

    问题描写叙述 遇到的问题是在weblogic环境,应用在上传图片的时候报Could not initialize class sun.awt.X11.XToolkit 错误. 详细错误例如以下 17: ...

  8. httpd的简单配置(转)

    一般网站都采用httpd作web服务器提供web页面,本文主要介绍下几个httpd中常用的配置属性和配置方式,当然具体应用更具具体需求来定. 代理模块配置: 由于网页动态化,网页的生成基本代理到后端服 ...

  9. spring MVC 下载文件(转)

    springle MVC中如何下载文件呢? 比struts2 下载文件简单得多 先看例子: @ResponseBody @RequestMapping(value = "/download& ...

  10. 西南民大oj(两园交求面积)

    西南民大oj:http://www.swunacm.com/acmhome/welcome.do?method=index 我的几何不可能那么可爱 时间限制(普通/Java) : 1000 MS/ 3 ...