凡是需要滚动的地方都加一句scroll-behavior:smooth 来提升滚动体验！

• 经常使用的锚点定位功能就有了平滑定位功能，如

<a href="#">返回顶部</a>

• 全局css中也建议添加

html, body { scroll-behavior:smooth; }

完整范例代码和效果

<template><div class="demo"><div class="box"><div class="list"><input id="one" readonly />1</div><div class="list bg-blue"><input id="two" readonly />2</div><div class="list bg-olive"><input id="three" readonly />3</div><div class="list bg-orange"><input id="four" readonly />4</div></div><div><label class="click" for="one">1</label><label class="click" for="two">2</label><label class="click" for="three">3</label><label class="click" for="four">4</label></div></div>
</template><style scoped>
.demo {padding-top: 20px;padding-bottom: 20px;text-align: center;
}
.box {width: 20em;height: 10em;line-height: 10em;scroll-behavior: smooth;overflow: hidden;margin: auto;
}
.list {height: 100%;background: #ddd;text-align: center;position: relative;font-size: 8em;
}
.list > input {position: absolute;top: 0;height: 100%;width: 1px;border: 0;padding: 0;margin: 0;clip: rect(0 0 0 0);
}.click {display: inline-block;width: 2em;height: 2em;line-height: 2em;border: 1px solid #ccc;background: #f7f7f7;color: #333;font-size: 1em;font-weight: bold;text-align: center;text-decoration: none;cursor: pointer;margin: 0.5em;
}.bg-orange {background-color: #fccba2;
}.bg-olive {background-color: #b9f2d8;
}.bg-blue {background-color: #89c6fc;
}
</style>