<!DOCTYPE html> <html> <head> <title>html5</title> <meta http-equiv="content-Type" content="text/html;charset=utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" href="reset.css"> <!-[if lt IE 8]> <script type="text/javascript" src="html5.js"></script> <![endif]-> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <style type="text/css"> .box {width: 800px; height: 2000px; margin: 0 auto; background: #eaeaea; position: relative;} .goTop {width: 50px; height: 200px; background: #ccc; position: absolute; right: -50px; display: none;} </style> <!-- javascript --> <script type="text/javascript"> $(function(){ // 滚动条发生变化时触发事件 $(window).scroll(function (){ // 获取滚动条到文档顶部的高度 var j = $(document).scrollTop(); // 当前窗口高度 var winH = $(window).height(); if(j>0){ // 给div的top属性赋值 滚动条到顶端的距离+当前窗口高度-div高度 $(".goTop").fadeIn().css("top",j + winH - 220); }else{ $(".goTop").fadeOut(); } // 点击回到顶部 $(".goTop").click(function(){ $("html").animate({scrollTop:0},150); }); }); }) </script> <!-- jQuery --> <script type="text/javascript"> </script> <style> </style> </head> <body> <div> <div> </div> </div> </body> </html>
浙公网安备 33010602011771号