锚点跳转-附带CSS样式 & 阻止页面刷新技术方案

加个鸡腿儿2025-11-14 16:36

问题：触发浏览器默认锚点行为，首次点击，刷新页面，虽然回到顶部，但未保存数据被清空。

js 复制代码

<!-- 原始 -->

<span id="topAnchor"></span>

<!-- 回到顶部按钮 -->

<a href="#topAnchor" class="back-top-btn">

<a-icon type="arrow-up" />

</a>

解决方案：阻止默认行为 + 编程控制

js 复制代码

<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稳定的场景

js 复制代码

配合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);
 }
}

锚点跳转-附带CSS样式 & 阻止页面刷新技术方案

问题：触发浏览器默认锚点行为，首次点击，刷新页面，虽然回到顶部，但未保存数据被清空。

解决方案：阻止默认行为 + 编程控制

关键技术点

适用场景

效果图