凡是需要滚动的地方都加一句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>
