js实现顶部悬浮、一键回到顶部

最新推荐文章于 2021-06-30 20:38:16 发布

YD-stars

最新推荐文章于 2021-06-30 20:38:16 发布

阅读量1.7k

点赞数 7

分类专栏： JS 文章标签： js html5 html

本文链接：https://blog.csdn.net/weixin_43513126/article/details/107279567

版权

本文通过JavaScript详细介绍了如何实现页面顶部悬浮及一键返回顶部的效果，提供了html、css和js代码示例，并附有详细注释。

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

效果图：

在这里插入图片描述

html、css 代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
            padding: 0;
            margin: 0;
            font-size: 42px;
            text-align: center;
            color: #fff;
        }

        .header {
   
            width: 100%;
            height: 100px;
            background-color: burlywood;
        }

        .nav {
   
            width: 100%;
            height: 150px;
            background-color: cadetblue;
        }

        .main {
   
            width: 100%;
            height: 1000px;
            background-color: cornflowerblue;
        }

        .bottom {
   
            width: 100%;
            height: 200px;
            background-color: palevioletred;
        }

        #topBtn {
   
            width: 60px;
            font-size: 42px;
            position: fixed;

最低0.47元/天解锁文章

YD-stars

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
js实现顶部悬浮、一键回到顶部

目录效果图：html、css 代码实现：js代码实现：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&g
复制链接

扫一扫

专栏目录