点击回到页面顶部

在HTML中如何实现点击回到顶部呢，很简单，话不多说，直接看例子

首先明确一下需求，这也是常见的需求了，就是当页面滚动到一定高度的时候才会显示出“回到顶部的图标”。

## 第一步

，在html中定义一下这个图标，我这里用的是svg图片，大家需要的话可以到阿里巴巴矢量图标库搜索下载即可，接着写一下css样式嘛，例如这样：

HTML代码：

<!-- 回到页面顶部图标 -->
    <img id="gototop" src="./img/gototop.svg"/>

CSS样式：

#gototop {
    width: 2vw;
    height: auto;
    /* background-color: red; */
    position: fixed;
    top: 80vh;
    right: 1%;
    margin: auto;
    display: none;
    cursor: pointer;
}

## 第二步

，我这里用的是jQuery实现的，当然你也可以用原生去实现，一样的原理（用jQuery记得先要引入jquery.js文件哦）

js代码：

//返回顶部
    $(window).scroll(function () { //  添加滚动事件
        if ($(window).scrollTop() >= 1500) {
            // 当窗口的scrollTop >=500时  让盒子出现
            $('#gototop').css('display', 'block');
        } else {
            $('#gototop').css('display', 'none'); //否则隐藏
        }
    });
    $('#gototop').click(function () { //添加点击事件
        $('html,body').animate({
            'scrollTop': 0
        }, 500);
        //使文档可视区距离页面顶端的距离为0
        // 这里使用的是animate方法
    })

最后就是如下效果啦：

大家赶紧复制我的代码试试吧，对你有用的话谢谢点个赞加关注哦，谢谢！