jQuery go to top slide show hide

jQuery go to top slide show hide

<head>
<style type="text/css">
 #gotop {position:fixed; right: 20px; bottom:50px; z-index:100; cursor: pointer; text-align:right; background-color:#f4f4f4; text-align:center; padding:10px; color:#666;-webkit-border-radius:10px;   -moz-border-radius:10px; border-radius:10px; " onmouseover="this.style.background='#ebebeb';" onmouseout="this.style.background='#f4f4f4';"}    
</style>

<script type="text/javascript" src="js/jquery.js"></script>
<!--gotop-->
<script type="text/javascript">
    $(document).ready(function(){
        $("#gotop").hide()
        $(function(){
            $(window).scroll(function(){
                if($(this).scrollTop()>1){
                    $("#gotop").fadeIn();
                } else {
                    $("#gotop").fadeOut();
                }
            });
        });
   
        $("#gotop a").click(function(){
            $("html,body").animate({scrollTop:0},800);
            return false;
        });
    });
</script>
<!--gotop end-->
</head>

<body>
<div id="gotop"><a href="#">Top</a></div>
</body>


參考資料:

http://www.w3cplus.com/jquery/scrolling-to-the-top-with-jquery

jon6773 發表在 痞客邦 PIXNET 留言(0) 人氣()