Day 25:从头开始的 Scroll Behavior

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

导览列置顶在视窗最上方

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

不过这还算容易调整,使用定位方式 position: fixed; 就能快速解决了!
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",
    });
  },
},

scroll to top

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

需求: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" };
  },
})

参考资料


<<:  Day 25 - Code Injection 与 SQL Injection

>>:  [ Day 25 ] - 阵列的资料处理 - find

JavaScript学习日记 : Day21 - 数组方法(一)

在前端的日常开发中,数组使用的频率非常高,所以充分熟悉各种常见的方法後,能提升工作的效率。 1. 基...

Day23 AR隐形眼镜 实现前的最後几哩路 是坎坷的天堂路还是一路顺风的云霄飞车呢?

上期介绍了Mojo Lens(AR隐形眼镜)的一些功能,了解到了他的特别之处,但除了这些特点之外,他...

[Day24] 求值策略

先 po 文.. Call by Value 传值 Call by Reterence 传参照 Ca...

Day3 差点难产的CSS

一直以来我都很有自知之明我不是一个很有艺术天份的人,所以一开始在设定目标时我就是以後端工程师为目标,...

最短路径问题 (7)

10.9 Chan’s APSP 演算法 我们今天来介绍一个 O(n^3 / log n) 时间复杂...