前端路由和滚动位置

前端路由是地址和视图(页面或DOM)的映射关系，路由切换时视图相应地变化，进而牵扯到页面滚动位置的变化。

1.基于a标签的路由

a标签可以说是整个万维网最重要的标签了，通过超链接实现页面的跳转、互连。

假设有pageA和pageB。用户点击超链接从pageA到pageB然后再倒退到pageA，默认pageA会恢复到原来的滚动位置。示例。

这是一种友好、自然的交互方式(浏览器做了额外工作)。如果设置history.scrollRestoration = "manual"，倒退回PageA时，页面的滚动位置会被重置到初始状态(垂直和水平滚动为0)。示例。

同样的。刷新页面，默认情况下页面也可以恢复到原来的滚动位置。设置history.scrollRestoration = "manual"后，每次刷新，页面的滚动位置都会被重置。

2.单页应用的路由

单页应用的路由切换时，对应的DOM被销毁和创建、或隐藏和显示。此时，滚动位置直接受视图变化影响，每次视图变化都重新计算滚动位置。这种默认行为本来是自然的，但在单页应用里，极可能导致路由切换时，新视图就已经滚动了。你可以主动侦听路由变化，重置滚动位置，来解决这个问题。