Day 25：从头开始的 Scroll Behavior

目前导览项目页面愈来愈完整，相对有愈来愈多小细节需要留意，尤其是资料量变多时，许多浏览时伴随的滚动效果多少会影响使用者体验，因此除了顾及版面资料和操作功能，UX 方面也不能轻忽。

导览列置顶在视窗最上方

需求：浏览书单时，往下滑动便会让导览列相对往上而消失在视窗内

不过这还算容易调整，使用定位方式 position: fixed; 就能快速解决了！

浏览到一半可以直接回到最上方

需求：当浏览书单资料量较多的页面时，浏览到半途想要回到页面最上方，却得拉动滚动条或慢慢往回滚动页面

在右下角新增一个可以点击的按钮，一样使用 position: fixed; 固定在视窗上，无论使用者浏览到任何程度都能立即点击按钮回到页面最上方。

单纯切版的话，可以利用 <a> 的 href 属性，设定 href="#" 或 href="#top" 直接连结到当前页面的最上方。

透过 JavaScript 操作时，则可使用 Web APIs 当中的 window.scrollTo() 设置滚动行为。

<button @click="scrollToTop">
    <img src="@/assets/chevron-up.png" alt="Scroll To Top" />
</button>

methods: {
  scrollToTop() {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth",
    });
  },
},

切换页面或重整页面时，画面回到最上方从头开始显示内容

需求：Day 10 曾提到 Vue.js 采用「就地更新」策略，因此会有重复使用元件的情形，再加上 SPA（Single Page Application）单页式应用只会抽换页面内容，因此在切换路由时，资料虽然有更新，但仍保持上一页最後的浏览位置；这对使用者来说，会以为网页出现问题，例如在 IT邦帮忙铁人赛系列书已经浏览到最底部，结果切换到五折区却还是停留在最底部，而不是页面开头处。

scrollBehavior

在建立 Router 实例时使用 scrollBehavior 函式，可以指定滚动至特定位置，如此一来便能在每次路由切换时，都会将显示画面滚动至所设定的指定位置。

• { x: 0, y: 0 }：设定 X、Y 轴回到顶端处
• behavior：设定 scroll 行为，smooth 为平滑滚动。

const router = new VueRouter({
  routes: [...],
  scrollBehavior() {
    return { x: 0, y: 0, behavior: "smooth" };
  },
})

参考资料

• [MDN] - <a> - href
• [MDN] - Window.scrollTo()
• Vue Router - Scroll Behavior