今天小编和大家分享的是Html网页中如何制作返回顶部效果，方法很简单，只要有一点代码基础都可以看懂的。
工具/原料
css文件
js文件
准备工作
1、首先，我们来看一下html代码，就几行很简单。
2、接下来我会分解式的讲解一下，我在head头部，分别引入了一个了css样式文件，js文件。css样式文件（bootstrap傧韭茆鳟）主要是用来显示返回顶部的小图标，js文件是用来触发点击返回顶部图标的一个效果。
3、body(主体),就是写了一个A标签，里面嵌套了一个span标签，来显示图标。
4、现在我们看到的js的代码，就是我们的核心内容了，我在图解中都说明了。如图所示：
5、忘记补充了head（头部），还写了一个style样式，主要是用来控制返回顶部的图标样式。
6、最后，我把源码放这里，大家可以参考捂执涡扔使用。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>案例——一定高度出现返回顶部图标</title> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"> <script src="js/vendor/jquery.min.js"></script> <style type="text/css"> .Topshow{width:30px;height:30px;position:fixed;line-height:36px;right:20px;bottom:20px;display:none;cursor:pointer;text-align:center} </style></head><body style="height:1500px;"> <a class="Topshow"><span class="glyphicon glyphicon-circle-arrow-up" style="font-size:30px;" aria-hidden="true"></span></a> <script type="text/javascript"> $(function(){ <!-- 返回顶部开始 --> $(window).scroll(function(){ if($(window).scrollTop() >= 200){ $('.Topshow').fadeIn(1000); //1000指时间，淡入效果来显示 }else{ $('.Topshow').fadeOut(1000);//1000指时间，淡入效果来隐藏 } }); $('.Topshow').click(function(){ $('html,body').animate({scrollTop: '0px'});//800滑动的速度 }); <!-- 返回顶部结束 --> }) </script></body></html>
