React SPA 应用 hash 路由如何使用锚点

当咱们在作 SPA 应用的时候，为了兼容老的浏览器（如IE9）咱们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由，可是由于 hash 被路由占据了，致使原本不是问题的锚点功能却成了一个不大不小的问题。

通过我本身的搜索目前有两种方式可以解决这个问题，为了能在 react 生态下面简单优雅的使用，我专门封装了一个锚点组件 react-anchor-without-hash，它使用了相似原生 a 标签的写法，而且能够支持滚动的距离和指定滚动的元素，尽量的知足业务的需求。

不过在介绍这个组件以前，仍是得先说一下两种基本的解决方案。

两种解决方案

scrollIntoView

scrollIntoView 方法可让当前的元素滚动到浏览器窗口的可视区域内。
它的使用方法以下：

var element = document.getElementById("box");

element.scrollIntoView();

这个 api 兼容 IE8 及以上的浏览器，因此能够放心使用。

注：IE10 以前的 IE 浏览器部分支持，具体请查看 Can I Use。

scrollTop

另外一个方法是使用 scrollTop 这个 api，这个方法的兼容性也是比较好的，这个方法相比于 scrollIntoView 来讲须要你本身定义要滚动的元素和要滚动的高度，虽然看起来麻烦一些，可是好处是自由度比较高，试想一下下面的场景：

• 你有一个 A 元素在 Content 里面，Content 设置了滚动，你想让 A 元素滚动到可视区域内。

• 若是用 scrollIntoView 会变成下面这样，A 元素显示到整个浏览器视口的最上面，这样就会和 Header 重合，被遮挡住一部分。

• 因此这时候须要使用 scrollTop 去设置 content 滚动距离，好比说是 60px，最后的效果就变成了咱们想要的结果。

使用方式以下：

const cont = document.querySelector('#container');
const a = document.querySelector('#a');

cont.scrollTop = a.offsetTop + 60;

react-anchor-without-hash

以上两种方式若是想方便的在项目里面使用多少都须要封装一下，并且使用起来和原生的 a 标签形式也相差甚远。

可是若是是在 react 技术栈下，咱们能够利用组件来封装一个相似 a 标签的锚点，这样在使用形式上，咱们就能更接近于原生的方式，下降使用成本。

因而我写了这个 react 组件，兼容以上两种方案，让你可以很是简单的实现锚点，若是使用了该组件的话，上面的实现方式就会变成下面这样：

import Anchor from 'react-anchor-without-hash'

// ......

const anchorProps = {
  type: 'scrollTop',
  container: '#container',
  interval: 60
}

<div id="container" style={{position: 'relative', overflow: 'scroll'}}>
  <Anchor name="a" {...anchorProps}>
    <div>
      <h2>This is a</h2>
      <div>There are some text...</div>
    </div>
  </Anchor>
</div>

这时候你只须要在页面的地址栏输入: http://somehost/path/#hash?_to=a 页面就会让 A 滚动到你想要的位置啦！

github：https://github.com/kwzm/react...

demo：https://kwzm.github.io/react-...

codesandbox: https://codesandbox.io/embed/...

欢迎讨论和Star！！！