通过链接如何找到指定位置

现在有一个需求，就是通过链接调到指定页面的位置，不然就得不同链接不同页面，那样工作量大之外，还太浪费。于是决定在一个页面中，通过链接跳到指定位置。需要跟github的效果一样

github

通过上面的github图，可以看出几个基本需求

  • 跳转时携带id，自动跳转到指定位置
  • 被选中的元素具有 focus 效果
  • 被选中的元素具体顶部有一段距离
  • 点击 document 时，清除选中效果，同时路由上删除id
  • 点击浏览器回退按钮，可以出现新进入时的效果

开启挖掘之旅

鉴于上面的需求，通过hash(锚点)是可以简单实现上面的要求，个人当然希望能用浏览器及css解决的，就尽量解决，若是不行只能通过js来尽可能模拟出想要的效果。

在此，我们需要恶补2个知识点

地址栏改变，页面不刷新不滚动 介绍

通过github的效果，我们知道地址栏是改变了，但是视觉上确实没有感到有任何一样（除了focus效果消失）。

通过history的replaceState便可以实现上述效果

// 记录第一次的值 const firstTop = document.scrollingElement.scrollTop // 清空hash window.location.hash = "" // 地址栏刷新不跳转 window.history.replaceState(null, null, window.location.pathname + window.location.search) // 再回滚之前的位置 document.scrollingElement.scrollTop = firstTop

github的代码 github

鄙人的代码没有那么全面，但是原理是一样的

至此页面刷新不跳转便算完成了

利用hash进行定位

利用锚点进行定位

html

<a href="./base.html#two" class="header">two</a>  > base.html  <div class="wide segment" id="two">   <h2>two</h2>   <div class="sc">