昨天一个朋友问我如何在页面加载完成后,自动将页面定位到某个位置,当时有些忙,就没来得及解决。殊不知今天在做
PHP教程的项目中也有了同样的需求:为了页面美观,需要只显示用户从楼盘相册点击后进入的相册幻灯页面的楼盘信息(也就是自动定位到了楼盘的相关信息,忽略了顶部banner)。如下图所示:
使用Javascript自动将页面滚动到指定位置
指定需要滚动的位置
这一步很简单,就是需要给滚动到指定位置的元素加上id属性,如下:
1 | < span id = "title" class = "title" >天一广场</ span > |
使用Javascript自动将页面滚动到指定位置
脚本如下:
1 | <script type=”text/javascript”> |
3 | window.location.hash = "#title" ; |
这就完成了我们的需求,经测试兼容所有主流浏览器。
我也查阅了网上的一些资料,有的朋友说还有如下方式实现:
1 | <script type= "text/javascript" > |
3 | var scroll_y = parseInt(1000); |
4 | window.scrollBy(0, scroll_y); |
我也对上面的方法进行了测试,发现使用javascript中的window.scrollBy()存在一个问题:每刷新一次页面,滚动距离顶部的高度都会比上次递增我们定义的scroll_y值。
所以还是建议大家使用window.location.hash方法来自动将页面滚动到指定位置。
原文地址:
Javascript自动将页面滚动到指定位置