【1】使用默认链接锚点
添加一个a链接，设置a链接的href属性值为"#top"即可实现
<body> <div>我在顶部</div> <!-- 很多内容 --> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <!-- 很多内容 --> <div><a href="#top">返回顶部</a></div>
【2】href指向特定的id
给页面顶部元素设置一个id值，将返回顶部a链接的href属性指向改id属性的元素
<body> <div id="header">我在顶部</div> <!-- 很多内容 --> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <!-- 很多内容 --> <div><a href="#header">返回顶部</a></div>
【3】使用自定义链接锚点
在页面顶部定义一个锚点，然后将返回顶部a链接的href属性指向该锚点
<body> <a name="goTop"></a> <div>我在顶部</div> <!-- 很多内容 --> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <!-- 很多内容 --> <div><a href="#goTop">返回顶部</a></div>
【4】使用简单的JavaScript脚本
设置scrollTo(x,y)中的x和y的坐标值来滚动到页面的具体位置
<body> <div>我在顶部</div> <!-- 很多内容 --> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <!-- 很多内容 --> <div><a href="javascript:window.scrollTo(0,0)">返回顶部</a></div>
</body>
【5】火箭上升式返回顶部（jQuery实现）
上面几种方式实现起来比较简单，但是效果生硬，直接从底部切换到顶部，没有一个过渡的动画。此方法能使页面动态滚动，同时将按钮换成一个箭头标志，判断页面滚动的距离，当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <style> .header { color: rgb(243, 152, 6); width: 100%; height: 200px; margin: 0 auto; text-align: center; font-size: 20px; } .footer { position: fixed; right: 50px; bottom: 50px; width: 54px; height: 54px; } </style> </head> <body> <div class="header">我在顶部</div> <!-- 很多内容 --> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <!-- 很多内容 --> <img class="footer" id="gotoTop" src="https://i02piccdn.sogoucdn.com/4f3b2858eec9e2cf" alt=""> <script> function gotoTop(minHeight){ // 定义点击返回顶部图标后向上滚动的动画 $("#gotoTop").click( function(){$('html,body').animate({scrollTop:'0px'},'slow'); }) // 获取页面的最小高度，无传入值则默认为600像素 minHeight? minHeight = minHeight:minHeight = 600; // 为窗口的scroll事件绑定处理函数 $(window).scroll(function(){ // 获取窗口的滚动条的垂直滚动距离 var s = $(window).scrollTop(); // 当窗口的滚动条的垂直距离大于页面的最小高度时，让返回顶部图标渐现，否则渐隐 if( s > minHeight){ $("#gotoTop").fadeIn(500); }else{ $("#gotoTop").fadeOut(500); }; }); }; gotoTop(); </script> </body>
转载于：https://blog.csdn.net/qq_38128179/article/details/85161910