利用css实现返回顶部按钮

只要我足够菜，你们就骂不了我

已于 2022-04-28 18:30:36 修改

阅读量1.9k

点赞数

分类专栏：网页设计文章标签： css css3 html

于 2022-04-28 18:30:34 首次发布

本文链接：https://blog.csdn.net/jfukg/article/details/124480437

版权

网页设计专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用CSS创建一个返回顶部的按钮。HTML结构包含一个头部和底部元素，以及一个固定在底部的返回顶部链接。CSS代码详细定义了各个元素的样式，包括按钮在页面上的位置、字体大小、颜色以及鼠标悬停时的样式变化。当页面滚动到底部，点击返回顶部按钮可以直接跳转到页面顶部。

摘要由CSDN通过智能技术生成

利用css实现返回顶部按钮，可以根据注释自己修改样式
html代码

<body>
    <div id="header" class="header">头部</div>
    <div class="buttom">尾部</div>
    <!-- 返回顶部 -->
    <a class="topa" href="#header">
        <div class="topb " style="display:block ">返回顶部</div>
    </a>
</body>

css代码

<style>
        .header {
            width: 100%;
            height: 2000px;
            font-size: 20px;
            text-align: center;
            background: rgb(112, 219, 233);
        }
        
        .buttom {
            width: 100%;
            height: 50px;
            font-size: 20px;
            text-align: center;
            background: rgb(207, 250, 105);
        }
        
        .topa {
            /* 一开始字体颜色 */
            color: black;
        }
        
        .topb {
            /* 按钮位置设定 */
            position: fixed;
            bottom: 50px;
            right: 30px;
            /* 字体大小 */
            font-size: 18px;
            font-family: "Microsoft YaHei";
            /* 一开始按钮底色 */
            background: rgba(255, 255, 255, 0.74);
            /* 按钮长宽 */
            width: 90px;
            height: 50px;
            line-height: 50px;
            padding-left: 20px;
            cursor: pointer;
            display: none;
            z-index: 111
        }
        
        .topb:hover {
            /* 鼠标移到按钮字体颜色 */
            color: #fff;
            /* 鼠标移到按钮按钮底色 */
            background: rgb(0, 0, 0);
        }
    </style>