一起养成写作习惯！这是我参与「日新计划 4 月更文挑战」的第21天，点击查看活动详情。

务实|滚动条置顶的几种方法

一、前言

在单页应用中，比如vue，常常会遇到跳转到下动画电影一页的时候，滚动条保留在上一个页容器中有某种酒精含量的酒精溶液面停留的位置，然而这可能不是我们希望的。此时，用户想要的是每跳转到一个新页面，尤其是详情页跳转到详情页这种场景，动画片少儿小猪佩奇滚动条可以重置的顶部。

当然，像详情页返回列表页时，希望返回的时候仍然是原来列表所在位置，这种场景本文不讨论。本文讨论的是每当跳转到一个新elements中文翻译页面，要求实现滚动条置顶的场景。

那么，接下来给出几种滚动条置顶的方案，并给出对比容器是什么分析。

二、实现方案

经验提前说：

建议先试方案像素涂色一，方案一不好使approve再试方案二，最后再尝试方案三。这样建议是elementanimation经验之谈，因为一些人会做一些特殊appearance的路由配置，那可能会使得方案产生意外，比如某些场景下document.body.scrollTop的像素冒险世界值在页面跳转前已经是0，显然elements再设置为0是不会产生滚elementary翻译动条置顶的效果的。而诡异的像素是跳转前的滚动条并不是置顶的。

遗憾的是未能查清这种诡异的因果，所容器化部署以建议几像素画个方案都尝试appstore下。实践种，我在两个项目分别用了方案一和方案二，方案反之使用无效果。但对应的方案使用却效果良好，且久经考验未发现bug。

1.方案一

// 在路由前置守卫函数中配置
router.beforeEach((to, from, next) => {
  // 滚动条置顶
  window.scrollTo(0, 0) 
  document.body.scrollTop = 0 
  document.documentElement.scrollTop = 0 
  // 注意，pageYOffset 直接赋值，在 ie11 会报错，这种报错会导致页面一片空白显示异常
  // window.pageYOffset = 0
})

2.方案二：利用 scrollIntoView()

// 在路由前置守卫函数中配置，发生路由变化时（即页面发生跳转时），滚动#app元素到可视区域的顶部，
// 这里是利用#app元素是body元素的特点，因为滚动#app元素到可视区域，且顶部对齐，此时滚动条也会置顶。
router.beforeEach((to, from, next) => {
  // 滚动条置顶
  // 获取#app根元素
  const app = document.getElementById('app')
  // behavior: "smooth"，设置滚动过程动画过渡效果为smooth
  // block: "end",定义垂直方向的对齐方式为 start ，即顶部对齐
  // inline: "nearest"，定义水平方向的对齐方式为 start
  app.scrollIntoView({behavior: "smooth", block: "start", inline: "start"})
})

3.方案三：利用 Element.scrollTop

// 在路由前置守卫函数中配置，设置 #app元素的 scrollTop 的值0，从而达到滚动条置顶的效果
// 需要注意的是，当 app.scrollTop 的值在页面跳转前已经为0的时候，这不会产生滚动条置顶的效果
router.beforeEach((to, from, next) => {
  // 滚动条置顶
  // 获取#app根元素
  const app = document.getElementById('app')
  app.scrollTop = 0
})

三、关键技术点小结

1.window.scrollTo(0, 0)

scrollTo() 是 window 的方法，表示将滚动条的elementary是什么意思位置，滚动到文档中的某个坐标。

其基本用法如下：像素涂色

// x 是文档中的横轴坐标，y 是文档中的纵坐标。
window.scrollTo( x, y )
window.scrollTo({
   left:0, // 等同于x
   top: 1000, // 等同于y
   behavior: "smooth", // 设置滚动动画效果为smooth，即平滑滚动
})

注意，该函数实际上和 window.scroappearancell是一样的。相对滚动可以参动画专业考 window.scrollBy，w容器化部署indow.scrollByLines，和 window.scrollByPages。

2.Element.scrollTop = 0

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 scrollT动画专业op 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内APP容没有产生垂直方向的滚动条，那么它的 scrol像素画lTop 值为0。

其基本用法如下：

// 设置滚动的距离
Element.scrollTop = intValue; // intValue 是一个整数，表示会将元素滚动到该位置

3.Elemen容器化部署t.scrollIntoView()

scrollIn动画toView()方法会滚动元素的父容器，使被调用scrollInt像素画生成器oView()的元素对用户可见。

其基本用法如下：

// 可选，scrollIntoViewOptions：{behavior: "smooth", block: "end", inline: "nearest"}
// 可选，behavior ：定义动画过渡效果，"auto"或 "smooth" 之一。默认为 "auto"。
// 可选，block：定义垂直方向的对齐，"start", "center", "end", 或 "nearest"之一。默认为 "start"。
// 可选，inline：定义水平方向的对齐，"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
Element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
Element.scrollIntoView({block: "end"});
Element.scrollIntoView();