JavaScript 返回顶部案例

最新推荐文章于 2024-03-19 10:15:00 发布

山有扶苏..

最新推荐文章于 2024-03-19 10:15:00 发布

阅读量255

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/luobifeiyeshi0/article/details/129939197

版权

本文介绍了如何使用JavaScript实现页面返回顶部的功能。随着浏览器滚动到一定位置，会出现返回顶部的按钮，点击该按钮可以将浏览器视口移动到页面初始位置。详细内容包括HTML布局和JavaScript的元素获取、滚动事件监听及按钮点击事件的处理。

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

前言

当浏览器滑到一定位置时出现向上返回顶部按钮，点击按钮可以使浏览器视口返回初始位置。

一、HTML代码

<head>
    <style>
        * {
     
            padding: 0;
            margin: 0;
        }
        #box {
     
            height: 2000px;
            background-color: aqua;
        }
        #img {
     
            position: fixed;
            right: 50px;
            bottom: 100px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="img">
            <img src="./image/top.png"