1、新建html文档。
2、书写html页面。<div class="scroll" id="scroll" style="display:none;"> 回到顶部 </div>
3、书写css样式。<style type="text/css">body荑樊综鲶, div, ul, li, a, img, h1, h2, h3, h4, h5, p, input { margin: 0; padding: 0; }article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }body { font-family: "微软雅黑", Verdana, Arial, Helvetica, sans-serif; position: relative; }img, input { outline: none; }ul { list-style: none; }a:link { text-decoration: none; color: #545454; }a:visited { color: #525252; }a:hover { color: #4D4D4D; }.clear { clear: both; }.ui-page { -webkit-backface-visibility: hidden; }.container { padding: 5px; min-width: 320px; }#one { width: 100%; }#one li { float: left; }#one li .a-1 { min-height: 70px; }#one li a { display: block; margin: 5px; background: yellow; }#one li img { width: 100%; min-height: 70px; vertical-align: middle; }.scroll { width: 80px; height: 80px; background: #64BFAE; color: #fff; line-height: 80px; text-align: center; position: fixed; right: 30px; bottom: 50px; cursor: pointer; font-size: 14px; }
4、书写js特效，以及应用js包。<script src="js/jquery-1.10.1.min.js"></script><script type="text/javascript"> $(function(){ showScroll(); function showScroll(){ $(window).scroll( function() { var scrollValue=$(window).scrollTop(); scrollValue > 100 ? $('div[class=scroll]').fadeIn():$('div[class=scroll]').fadeOut(); } ); $('#scroll').click(function(){ $("html,body").animate({scrollTop:0},200); }); } }) </script>
5、查看效果。
