网页中常常会有一个 返回顶部的功能，恰巧我这天写到了，在网上找了一下思路，下面就写了一个案例：
效果预览：https://li_shang_shan.gitee.io/small_rocket_back_to_top。
代码就直接粘贴了：
<html> <head> <meta charset="utf-8" /> <title>返回顶部插件</title> </head> <style type="text/css"> body{ background: url(img/bg.jpg) 100%; text-align: center; } .bg_top{ width: 100px; height: 110px; position: fixed; right: 30px; bottom: 50px; display: none; } .bg_top img{ width: 100px; height: 110px; transition: all 1s ease 0s; cursor: pointer; opacity: 0.6; } .yun{ width: 300px; margin: 0 auto; } h4{ margin: 30px auto; font-size: 35px color: rgb(0,0,0); } </style> <body> <h4>往下滑动滚动条出现小火箭</h4> <img src="./img/yunceng.jpg" class="yun"> <div class="bg_top"> <img src="./img/小火箭.gif" > </div> <script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function () { var scroll_top = $(document).scrollTop(); if (scroll_top > 400) { //当向下滚动400px时,出现返回顶部链接 $(".bg_top").show(300); } else { $(".bg_top").hide(300); } }); $(".bg_top").click(function () { $("html,body").animate({scrollTop:0}, 1000); }); $(".bg_top img").hover(function(){ $(this).css({ "opacity":1, "width":"90", "margin-top":"10px", }); },function(){ $(this).css({ "opacity":0.6, "width":"100", "margin-top":"0", }); }); }); </script> </body> </html>
置顶的小火箭可以在网上找，或者去矢量图库下载，用个箭头或者图片代替都OK
个人学习，内容简略。