JavaScript实现点击回到顶部的实例

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

Bravo！！！

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

阅读量209

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_47982238/article/details/107893995

版权

本文介绍了三种使用JavaScript实现点击回到页面顶部的方法，包括利用锚点、自定义实现及完整版代码示例，帮助读者掌握这一实用功能的实现技巧。

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

实例一：利用锚点回到顶部

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
            margin:0px;
            padding:0px;
        }
            
        .top{
            position: fixed;
            bottom:10px;
            right:15px;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div class="top">
        <a href="#abc">
            <img src="top.jpg">
        </a>
    </div>
    <a name="abc"></a>
    <h1>0000000000000000000000000001</h1>
    <h1>0000000000000000000000000002</h1>
    <h1>0000000000000000000000000003</h1>
    <h1>0000000000000000000000000004</h1>
    <h1>0000000000000000000000000005</h1>
    <h1>0000000000000000000000000006</h1>
    <h1>0000000000000000000000000007</h1>
    <h1>0000000000000000000000000008</h1>
    <h1>0000000000000000000000000009</h1>
    <h1>0000000000000000000000000010</h1>
    <h1>0000000000000000000000000011</h1>
    <h1>0000000000000000000000000012</h1>
    <h1>0000000000000000000000000013</h1>
    <h1>0000000000000000000000000014</h1>
    <h1>0000000000000000000000000015</h1>
    <h1>0000000000000000000000000016</h1>
    <h1>0000000000000000000000000017</h1>
    <h1>0000000000000000000000000018</h1>
    <h1>0000000000000000000000000019</h1>
    <h1>0000000000000000000000000020</h1>
    <h1>0000000000000000000000000021</h1>
    <h1>0000000000000000000000000022</h1>
    <h1>0000000000000000000000000023</h1>
    <h1>0000000000000000000000000024</h1>
    <h1>0000000000000000000000000025</h1>
    <h1>0000000000000000000000000026</h1>
    <h1>0000000000000000000000000027</h1>
    <h1>0000000000000000000000000028</h1>
    <h1>0000000000000000000000000029</h1>
    <h1>0000000000000000000000000030</h1>
    <h1>0000000000000000000000000031</h1>
    <h1>0000000000000000000000000032</h1>
    <h1>0000000000000000000000000033</h1>
    <h1>0000000000000000000000000034</h1>
    <h1>0000000000000000000000000035</h1>
    <h1>0000000000000000000000000036</h1>
    <h1>0000000000000000000000000037</h1>
    <h1>0000000000000000000000000038</h1>
    <h1>0000000000000000000000000039</h1>
    <h1>0000000000000000000000000040</h1>
    <h1>0000000000000000000000000041</h1>
    <h1>0000000000000000000000000042</h1>
    <h1>0000000000000000000000000043</h1>
    <h1>0000000000000000000000000044</h1>
    <h1>0000000000000000000000000045</h1>
    <h1>0000000000000000000000000046</h1>
    <h1>0000000000000000000000000047</h1>
    <h1>0000000000000000000000000048</h1>
    <h1>0000000000000000000000000049</h1>
    <h1>0000000000000000000000000050</h1>
    <h1>0000000000000000000000000051</h1>
    <h1>0000000000000000000000000052</h1>
    <h1>0000000000000000000000000053</h1>
    <h1>0000000000000000000000000054</h1

最低0.47元/天解锁文章

Bravo！！！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现点击回到顶部的实例

top.jpg实例一：利用锚点回到顶部<!doctype html><html><head> <meta charset="UTF-8"> <title>index</title> <style> *{ font-family: 微软雅黑; margin:0px; padding:0px;
复制链接

扫一扫

专栏目录