首页 > 编程语言 > 详细

JavaScript/Jquery返回顶部代码

时间:2017-06-15 13:46:54      阅读:292      评论:0      收藏:0      [点我收藏+]
技术分享
<!DOCTYPE html>
<html>
    <head>
        <title>返回顶部</title>
        <meta charset="utf-8" />
        <script type="text/javascript" src="jquery-1.8.2.js"></script>
        <style type="text/css">
            body{
                height:2000px;
            }
            #scrollTop{
                position:fixed;
                width:36px;
                height:65px;
                bottom:100px;
                right:100px;
                text-align:center;
                background:url("images/7.png");             
                color:#FFF;
                font-size:12px;
                cursor:pointer;
                display:none;
            }
            #scrollTop:hover{
                background-position:0px -66px;
            }
        </style>
    </head>
    <body>
        <div id="scrollTop"></div>  
 
        <script type="text/javascript">           
            $(window).scroll(function(){                            
                if($(window).scrollTop()<=100){
                    $("#scrollTop").fadeOut(1000);  
                }else{
                    $("#scrollTop").fadeIn(1000);
                }
            })
            $("#scrollTop").click(function(){
                 $(‘body,html‘).animate({scrollTop:0},500);
            })
        </script>
 
    </body>
</html>
技术分享

JavaScript/Jquery返回顶部代码

原文:http://www.cnblogs.com/zhangyubao/p/7016856.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!