背景

经常在用的一个配置管理页面在产品迭代了几个版本以后发现配置页越来越长,但是又不想做成两列(觉得丑),所以就自己写了一个目录,点击以后页面会滑动到对应的配置项.
一开始是打算用 a 标签的 href 来做,但是发现这个方式点击以后会改变 URL,而且是直接跳到指定的标签,用户体验不是很好,就改用scrollIntoView

scrollIntoView事件

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内
只要用document.getElementById()方法找到要跳转的 element,然后就可以用scrollIntoView方法实现跳转,代码如下:

document.getElementById(target).scrollIntoView({
    behavior: 'smooth',
    block: 'start'
})

scrollIntoView方法有 3 个多态,分别是不传参数,传 Boolean型的参数,传 Object 型的参数.

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

alignToTop

一个Boolean值：
如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions 可选

一个带有选项的object：

{
    behavior: "auto"  | "instant" | "smooth", //定义缓动动画 (可选)
    block: "start" | "end", // 跳转后标签位于屏幕的什么位置 (可选)
}

实现

实现非常简单,写一个固定在屏幕右上方的框框,带上一个阴影,其中最重要的是z-index:10;这一步,一定要把这个框框放到最上面的一层,保证不会被其他元素遮挡.然后加上一个:hover,使标题被选中时背景变色,鼠标变成手,然后用户更加清楚的知道自己选到了哪个标题

.catalog {
    display: block;
    position: fixed;
    right: 10px;
    top: 170px;
    z-index:10;
    box-shadow:0px 0px 6px rgb(89, 89, 89);
    border-radius: 10px;
}

.roll:hover{
    background-color: rgba(64,158,255,.4);
    cursor:pointer
  }

1
2
3

<div class="roll" @click="scrollTo('pic')"
    图片配置
</div>

最终效果