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

mannoroth 2014-04-23

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

使用Javascript自动将页面滚动到指定位置

下面我们就来讲解一下如何使用Javascript自动将页面滚动到指定位置。

指定需要滚动的位置

这一步很简单,就是需要给滚动到指定位置的元素加上id属性,如下:

天一广场

使用Javascript自动将页面滚动到指定位置

脚本如下:

这就完成了我们的需求,经测试兼容所有主流浏览器。

我也查阅了网上的一些资料,有的朋友说还有如下方式实现:

我也对上面的方法进行了测试,发现使用javascript中的window.scrollBy()存在一个问题:每刷新一次页面,滚动距离顶部的高度都会比上次递增我们定义的scroll_y值。

所以还是建议大家使用window.location.hash方法来自动将页面滚动到指定位置。

<scripttype=”text/javascript”>$(function(){window.location.hash="#title";})</script>

window.location对象属性介绍:

Location对象属性

属性         描述    IEFO

hash设置或返回从井号(#)开始的URL(锚)。419

host设置或返回主机名和当前URL的端口号。419

hostname设置或返回当前URL的主机名。419

href设置或返回完整的URL。419

pathname设置或返回当前URL的路径部分。419

port设置或返回当前URL的端口号。419

protocol设置或返回当前URL的协议。419

search设置或返回从问号(?)开始的URL(查询部分)。419

Location对象方法

属性描述IEFO

assign()加载新的文档。419

reload()重新加载当前文档。419

replace()用新的文档替换当前文档。419

History对象

History对象包含用户(在浏览器窗口中)访问过的URL。

History对象是window对象的一部分,可通过window.history属性对其进行访问。

History对象属性

属性描述IEFO

length返回浏览器历史列表中的URL数量。419

History对象方法

方法描述IEFO

back()加载history列表中的前一个URL。419

forward()加载history列表中的下一个URL。419

go()加载history列表中的某个具体页面。419

History对象描述

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

相关推荐