用JS将页面定位到某个位置(DIV)

标签: js 页面 位置 | 发表时间:2014-04-23 23:11 | 作者:娄宗超
出处:http://www.iteye.com
昨天一个朋友问我如何在页面加载完成后,自动将页面定位到某个位置,当时有些忙,就没来得及解决。殊不知今天在做PHP教程的项目中也有了同样的需求:为了页面美观,需要只显示用户从楼盘相册点击后进入的相册幻灯页面的楼盘信息(也就是自动定位到了楼盘的相关信息,忽略了顶部banner)。如下图所示:

使用Javascript自动将页面滚动到指定位置
下面我们就来讲解一下如何使用Javascript自动将页面滚动到指定位置。
指定需要滚动的位置
这一步很简单,就是需要给滚动到指定位置的元素加上id属性,如下:
天一广场
使用Javascript自动将页面滚动到指定位置
脚本如下:

这就完成了我们的需求,经测试兼容所有主流浏览器。
我也查阅了网上的一些资料,有的朋友说还有如下方式实现:
我也对上面的方法进行了测试,发现使用javascript中的window.scrollBy()存在一个问题:每刷新一次页面,滚动距离顶部的高度都会比上次递增我们定义的scroll_y值。
所以还是建议大家使用window.location.hash方法来自动将页面滚动到指定位置。
<script type=”text/javascript”> $(function(){ window.location.hash = "#title"; }) </script>
window.location 对象属性介绍:
Location 对象属性
属性          描述     IE F O
hash 设置或返回从井号 (#) 开始的 URL(锚)。 4 1 9
host 设置或返回主机名和当前 URL 的端口号。 4 1 9
hostname 设置或返回当前 URL 的主机名。 4 1 9
href 设置或返回完整的 URL。 4 1 9
pathname 设置或返回当前 URL 的路径部分。 4 1 9
port 设置或返回当前 URL 的端口号。 4 1 9
protocol 设置或返回当前 URL 的协议。 4 1 9
search 设置或返回从问号 (?) 开始的 URL(查询部分)。 4 1 9

Location 对象方法
属性 描述 IE F O
assign() 加载新的文档。 4 1 9
reload() 重新加载当前文档。 4 1 9
replace() 用新的文档替换当前文档。 4 1 9


History 对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
History 对象属性
属性 描述 IE F O
length 返回浏览器历史列表中的 URL 数量。 4 1 9
History 对象方法
方法 描述 IE F O
back() 加载 history 列表中的前一个 URL。 4 1 9
forward() 加载 history 列表中的下一个 URL。 4 1 9
go() 加载 history 列表中的某个具体页面。 4 1 9

History 对象描述
History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因,History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [js 页面 位置] 推荐:

用JS将页面定位到某个位置(DIV)

- - JavaScript - Web前端 - ITeye博客
昨天一个朋友问我如何在页面加载完成后,自动将页面定位到某个位置,当时有些忙,就没来得及解决. 殊不知今天在做PHP教程的项目中也有了同样的需求:为了页面美观,需要只显示用户从楼盘相册点击后进入的相册幻灯页面的楼盘信息(也就是自动定位到了楼盘的相关信息,忽略了顶部banner). 使用Javascript自动将页面滚动到指定位置.

js记录页面的点击位置并在页面刷新后滚动到该位置

- - JavaScript - Web前端 - ITeye博客
页面上的结果集列表有多条记录,选中某一行进行操作时,页面可能已经滚动过一段距离,当点击提交时希望能记录滚动过的长度,并在页面提交刷新后自动滚动到该位置. 使用jquery来操作dom,方便易用. 1、获取当前滚动过的距离;. 以struts2+velocity为例. 前台在点击某条记录修改时获取当前滚动的距离x、y,将x、y传给后台,后台处理完成后继续跳转页面(在本需求中即为当前页面),将x、y作为参数传给目的页面.

js获取鼠标位置的各种方法

- - JavaScript - Web前端 - ITeye博客
js获取鼠标位置的各种方法  . 转   JavaScript 获取鼠标点击位置坐标. 在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容.

js 和 jquery 获取页面和滚动条的高度

- - Web前端 - ITeye博客
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {. return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH}; }; //滚动条位置 function GetPageScroll() { var x, y; if(window.pageYOffset) {.

JS 和 CSS 的位置对其他资源加载顺序的影响

- - SegmentFault 最新的文章
克军做了一系列测试: js和css的顺序关系,给出了现象和结论,但未给出原因. JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等非 js 和 css 资源)的加载顺序,究其原因,有三个值得注意的点:. JS 有可能会修改 DOM.典型的,可能会有. 这意味着,在当前 JS 加载和执行完成前,后续所有资源的下载有可能是没必要的.

页面构建和js前端不得不说的那点事儿

- - 微博UDC
作为微博的页面构建工程师,主要职责就是利用html&css,高质量的完成静态页面的制作,保证项目的按时完成. 而页面需要的js效果则交给下游的js前端工程师去做. 但在大家的思维定势里可能觉得这两个岗位应由一个人来完成最好,毕竟,页面构建工程师写的html结构不一定是js工程师想要的那种,js工程师可能有更高效的方式.

javascript 获取滚动条高度+常用js页面宽度与高度

- - Web前端 - ITeye博客
javascript 获取滚动条高度+常用js页面宽度与高度 / ******************** * 取窗口滚动条高度 ****************** / function getScrollTop() {. return scrollTop; } / ******************** * 取窗口可视范围的高度 ******************* / function getClientHeight() {.

抓取Js动态生成数据且以滚动页面方式分页的网页

- - 开源软件 - ITeye博客
当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢. 如类似今日头条这样的网站: http://toutiao.com/. 我们可以使用 Selenium来搞定这件事情. Selenium的设计目的虽然是用于Web应用程序的自动化测试,但是却非常适合用来做数据抓取,可以非常简单地绕过网站的反爬虫限制,因为Selenium直接运行在浏览器中,就像真正的用户在操作一样.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.