转载：Javascript自动将页面滚动到指定位置

本文转自： http://www.phpfuns.com/scripts/javascript/javascript-auto-scroll.shtml

 

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

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

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

指定需要滚动的位置

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

<span id="title" class="title">天一广场</span>

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

脚本如下：

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

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

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

<script type="text/javascript">
function scrollwin() {
var scroll_y = parseInt(1000);
window.scrollBy(0, scroll_y);
}
</script>

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

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

 

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() 方法。