打开页面div滚动条定位(别用锚点)

来啦!客官久等了!!!!! 上代码:

<!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)

时间: 2024-12-22 01:12:33

打开页面div滚动条定位(别用锚点)的相关文章

FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

问题一:最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox(火狐)不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了,标准的是pointer 问题二:FireFox(火狐)不支持滤镜 最常见的半透明不支持. filter: Alpha(Opacity=50); /* for IE */ opacity: .5;/* for Firefox */ style="-moz-opacity:0.5; filter:alpha(opacit

Selenium2+python自动化26-js处理内嵌div滚动条

前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相. 2.页面源码如下:(老规矩:copy下来,用文本保存下来,后缀改成.html,用浏览器打开) <!DOCTYPE html><meta charset="UTF-8"> <!-- for HTML5 --><meta http-equiv=&qu

Selenium2+python自动化26-js处理内嵌div滚动条【转载】

前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相. 2.页面源码如下:(老规矩:copy下来,用文本保存下来,后缀改成.html,用浏览器打开) <!DOCTYPE html><meta charset="UTF-8"> <!-- for HTML5 --><meta http-equiv=&qu

JS通过设置cookie来控制弹出层,首次打开页面显示弹出层

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>JS通过设置cookie来控制弹出层,首次打开页面显示弹出层,刷新页面不再显示:关闭浏览器重新打开.清除缓存cookie显示.</title&

移动页面div居中效果代码

在线查看效果:http://hovertree.com/texiao/mobile/4.htm 可用手机浏览器查看 以下为HTML文件: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content=

sellenium页面元素的定位方法

1.findElements函数可用于多个元素定位 (1)使用ID定位:driver.findElement(By.id("ID值")); 例:HTML代码: 定位语句代码:WebElement username=driver.findElement(By.id("username")); WebElement password=driver.findElement(By.id("password"));  WebElement subimit=

js 定位到某个锚点

js 定位到某个锚点 html页面内可以设置锚点,锚点定义 Html代码   <a name="firstAnchor">&nsbp;</a> 锚点使用 Html代码   <a href="#firstAnchor">跳至第一个锚点</a> 但对于js呢,在js中如何在完成一个操作后跳至页面的某个固定锚点呢 js中location.href可以跳转至某个url: 跳至(定位到)某个固定锚点的办法 1.locat

关于在IE浏览器中,文档模式为&quot;杂项&quot;即Quirks,position为absolute且页面有滚动条时设置right的问题

由于系统的html页面没有指定相应的DTD,即<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">或<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht

[转载]js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

转载自:http://www.cnblogs.com/rainbow661314/p/3317106.html js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {    // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = w