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

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

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

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

指定需要滚动的位置

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

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

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

脚本如下：

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

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

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

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

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

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

原文地址： Javascript自动将页面滚动到指定位置