CSS实现回到顶部且平滑过渡

捌月湫CSS2024-10-28 15:35:095730

背景

最近同学在项目开发的时候问了我一个问题：小白，回到顶部该怎么做呀？我当时就愣住了，心想这不是很基础的一个功能吗，然后想到该同学没有系统学过网页三剑客，我就给他讲了该怎么实现这个虽然基础但在很多项目中都很实用的功能。

不过我还是笑了，为啥，因为我不允许还有人不会这个听起来貌似高大上的回到顶部，所以我选择更一篇。（大佬绕道 /plea手）

基本介绍

本文仅介绍回到顶部功能的CSS做法~~（毕竟这么简单没有特别的需求都能用）~~ 。

后续或许会出涉及JS的用法

什么是回到顶部按钮？

回到顶部按钮是一个浮动在页面右下角的小图标，用户点击后可以立即返回到页面的顶部。这种设计可以有效地提高网站的可用性，尤其是在移动设备上，用户只需轻轻一按就能回到开始阅读的位置。

代码实现

以下是实现回到顶部效果的 HTML 和 CSS 代码示例，功能以外的样式从简处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>back-to-top-demo</title>
    <style>
        /* 通配 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 滚动条样式 */
        /* 定义滚动条宽度和背景颜色 */
        ::-webkit-scrollbar {
            width: 8px;
            background-color: #F5F5F5;
        }
        /* 定义滚动条轨道的阴影和圆角 */
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }
        /* 定义滑块的圆角和阴影 */
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #555;
        }
        html,
        body {
            /* height: 100%; */
            /* width: 100%; */
            background-color: rgba(153, 153, 255, .3);
            /* 平滑过渡效果 */
            scroll-behavior: smooth;
        }
        /* scoped样式 */
        #title {
            text-align: center;
            font-weight: 900;
            font-family: '宋体';
            padding: 10px;
        }
        #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;
            /* opacity: .6; */
            transition: all .6s;
        }
        #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);
        }
    </style>
</head>
<body>
    <p id="index">
        <h1 id="title">我是标题</h1>
        <p id="content">
            <p id="a">我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
            /* p{我是内容}*100；需要自己添加足够多能出现滚动条的内容 */
        </p>
        <a href="#index" id="to_top_ball">↑</a>
    </p>
</body>
</html>

重点代码

平滑过渡

很多人会嫌CSS做的回到顶部太过于生涩，点一下它就直接跳到目标锚点了，然后纷纷选择使用JS，但事实的确如此吗？CSS真的做不了平滑过渡的拉动效果吗？当然不！一行CSS样式设置让你对它刮目相看。

html,
body {
    /* ...other codes... */
    scroll-behavior: 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; */
    /* ...other codes... */
}