1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 html{ 12 background: url(about:blank) fixed; 13 } 14 .back{ 15 width: 57px; 16 height: 57px; 17 background: url('./back.png') no-repeat; 18 position: fixed; 19 right: 50px; 20 bottom: 50px; 21 _position: absolute; 22 _right: 50px; 23 _top:expression(document.documentElement.clientHeight-this.offsetHeight-50+document.documentElement.scrollTop); 24 cursor: pointer; 25 display: none; 26 } 27 body{ 28 height: 5000px; 29 font-size: 22px; 30 font-weight:700; 31 } 32 </style> 33 <script type="text/javascript" src="./jquery.js"></script> 34 <script type="text/javascript"> 35 $(function(){ 36 var back = $('.back'); 37 back.click(function() { 38 var timer = setInterval(function(){ 39 $(window).scrollTop($(window).scrollTop()-50); 40 if($(window).scrollTop() == 0){ 41 clearInterval(timer); 42 } 43 },2); 44 }); 45 46 $(window).scroll(function() { 47 if($(window).scrollTop() < 100){ 48 back.hide(500); 49 } else { 50 back.show(500); 51 } 52 }); 53 54 }) 55 </script> 56 </head> 57 <body> 58 请往下拖动滚动条 59 <div class="back"></div> 60 </body> 61 </html>