js 滚动/跳转页面到指定位置

最新推荐文章于 2023-06-15 20:44:17 发布

转载最新推荐文章于 2023-06-15 20:44:17 发布 · 3.3w 阅读

本文介绍如何在网页中实现从一个页面跳转到另一个页面的任意位置，以及在同一个页面内部点击元素后滚动到指定位置的方法。通过创建锚点和使用JavaScript，我们可以轻松地解决页面滚动定位的需求。

要解决两个需求：

一个是从A页面跳到B页面，滚动到页面的任何地方；

第二个是在B页面内部点击某个元素，滚动到页面的任何地方；

怎么解决啊？很简单，当然是用锚点。

首先在A页面创建一个锚点

<body>
<a href="b.html#pos" target="_blank">点击跳转</a>
<body>

然后在B页面定义这个锚点

<body>
...
这里是很多文字，把页面撑开，撑出滚动条
...
<a name="pos">滚动到这里</a>
...
再加点文字
...
</body>

好，测试，OK！点过去之后是不是“滚动到这里”出现在了浏览器的最上方。

实际的情况经常是制作人员切好的页面，产品突然说要加个功能，需要滚动到某个地方，但是那个地方是个div，并没有a锚点，

创建一个锚点的话又会占据网页的空间，影响到网页的版式，这怎么办呢？我们创建一个隐藏的锚点试试，隐藏的锚点不占用空间。

继续：如果我让B页面里的 <a name="pos">滚动到这里</a> 不显示，就是设定display:none; 那么还能滚动到这里吗？试试

<body>
...
这里是很多文字，把页面撑开，撑出滚动条
...
<a name="pos" style="display:none;">滚动到这里</a>
隐藏之后滚动到这里
...
再加点文字
...
</body>

不妙，IE可以工作，火狐有点不给面子。

只能换一种思路，给锚点指定一个id能滚动到这里吗？试试

<body>
...
这里是很多文字，把页面撑开，撑出滚动条
...
<a id="pos">滚动到这里</a>
隐藏之后滚动到这里
...
再加点文字
...
</body>

OK,成功！看来换成id是个好办法，现在把锚点换成div试试

<body>
...
这里是很多文字，把页面撑开，撑出滚动条
...
<div id="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>

OK,成功！这样就解决了问题，不需要插入一个<a></a>锚点，只需要给div加一个id就行了。

接下来解决第二个需求，在B页面内部点击某个元素，滚动到指定位置。

首先，在B.html顶部创建一个锚点，指向要滚动的那个div

<body>
<a href="#pos">点击这里本页跳转</a>
...
这里是很多文字，把页面撑开，撑出滚动条
...
<div id="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>

OK,成功！那如果要点击一个button按钮滚动到指定位置呢？ button按钮不能添加href，只能曲折解决。

先建立一个隐藏的锚点，然后点击button按钮的时候加一个onclick事件，然后通过js来调用锚点的click事件，曲线救国。

<body>
 <script type="text/javascript">
 function click_scroll() {
  document.getElementById("anchor_scroll").click();
 }
 </script>
<input type="button" value="点击button跳转" onclick="click_scroll();" />
<a id="anchor_scroll" href="#pos" style="display:none">点击这里本页跳转</a>
...
这里是很多文字，把页面撑开，撑出滚动条
...
<div id="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>

OK,成功！既然button能够成功，那其他的也就好办了，img，div都可以这么做。

还有一个方法通过jQuery的aminate动画方法也可以做，我贴出代码

<body>
 <script type="text/javascript">
 function click_scroll() {
  var scroll_offset = $("#pos").offset();  //得到pos这个div层的offset，包含两个值，top和left
  $("body,html").animate({
   scrollTop:scroll_offset.top  //让body的scrollTop等于pos的top，就实现了滚动
   },0);
 }
 </script>
 <input type="button" value="点击button跳转" onclick="click_scroll();" />...
这里是很多文字，把页面撑开，撑出滚动条
...
<div id="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>