背景

最近有朋友在项目开发时问我：“回到顶部这个功能具体怎么实现？” 我愣了一下——这不应该是前端基础操作吗？转念一想，对方可能没系统学过HTML、CSS和Ja vaScript。于是，我仔细解释了如何实现这个看似简单、却在众多项目中极其实用的功能。
免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

不过，说实在的，我还是觉得这事儿值得专门聊一聊。毕竟，一个听起来有点“高大上”的交互效果，其实用纯CSS就能优雅实现，这方法值得更多人掌握。接下来，就让我们拆解一下。

基本介绍

本文专注于介绍如何使用纯CSS来实现回到顶部功能。对于大多数没有特殊交互需求的项目，这套方案已经足够简洁高效。

如果涉及更复杂的滚动控制，后续或许会探讨Ja vaScript的实现方案。

什么是回到顶部按钮？

回到顶部按钮，通常是一个悬浮在页面右下角的小图标。用户点击后，页面会迅速滚动回起始位置。这种设计显著提升了长页面的浏览体验，尤其在移动端，让“返回开头”这个操作变得轻而易举。

代码实现

下面是一份完整的HTML与CSS代码示例，核心是实现功能，视觉样式做了简化处理。

back-to-top-demo

我是标题

我是内容

/* p{我是内容}*100；需要自己添加足够多能出现滚动条的内容 */

↑

重点代码

平滑过渡

是不是常听人说，CSS实现的回到顶部很生硬，点击就“瞬移”，所以只能靠Ja vaScript？事实果真如此吗？CSS难道做不出平滑的滚动效果？当然可以。 秘诀就在于一行CSS属性，足以让你改变看法。

html,
body {
    /* ...其他代码... */
    scroll-beha vior: smooth;/* 平滑过渡效果 */
}

#to_top_ball

#to_top_ball {
    /* 球内内容水平垂直居中法一 */
    display: block;
    text-align: center;
    line-height: 60px;
    /* 球内内容水平垂直居中法二 */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    width: 60px;
    height: 60px;
    /* 控制箭头大小 */
    font-size: 50px;
    background-color: rgb(153, 204, 255);
    border-radius: 50%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    /* 呈现立体效果 */
    box-shadow: 0 0 20px 0 rgba(0, 0, 255, .5);
    /* 固定定位，相对窗口 */
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* 过渡效果，球hover后不生涩 */
    transition: all .6s;
}
/* 球hover后的效果 */
#to_top_ball:hover {
    background-color: rgb(255, 102, 102);
    box-shadow: 0 0 30px 0 rgba(255, 0, 0, .8);
    transform: translate(0, -10px);
}

#to_top_ball的内容控制

#to_top_ball {
    /* 球内内容水平垂直居中法一 */
    display: block;
    text-align: center;
    line-height: 60px;
    /* 球内内容水平垂直居中法二 */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* ...其他代码... */
}