问题：触发浏览器默认锚点行为，首次点击，刷新页面，虽然回到顶部，但未保存数据被清空。
<!-- 原始 -->
<span id="topAnchor"></span>
<!-- 回到顶部按钮 -->
<a href="#topAnchor" class="back-top-btn">
<a-icon type="arrow-up" />
</a>
解决方案：阻止默认行为 + 编程控制
<a @click.prevent="scrollToTop">回到顶部</a>
scrollToTop() {
const anchor = document.getElementById('topAnchor')
if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth', block: 'start' })
} else {
window.scrollTo({ top: 0, behavior: 'smooth' })
}
}
关键技术点
- @click.prevent - 阻止默认链接行为
- scrollIntoView() - 编程式控制滚动
- behavior: 'smooth' - 添加平滑动画
- URL保持不变 - 避免路由重载
适用场景
- 单页应用(SPA)
- 需要平滑滚动效果
- 希望保持URL稳定的场景
配合CSS:
<a @click.prevent="scrollToTop">回到顶部</a>
scrollToTop() {
const anchor = document.getElementById('topAnchor')
if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth', block: 'start' })
} else {
window.scrollTo({ top: 0, behavior: 'smooth' })
}
}
// css:回到顶部按钮样式
.back-top-btn {
position: fixed;
right: 80px;
bottom: 100px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #1890ff;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: all 0.3s;
cursor: pointer;
z-index: 1000;
&:hover {
background-color: #40a9ff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
}
&:active {
transform: translateY(0);
}
}
效果图
