最简单的jQuery实现页面回到顶部的功能

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>回到顶部</title>
        <style type="text/css">
            body {
                height: 8000px;
            }
            
            h1{
                color: #000;
            }
            
            img {
                position: fixed;
                bottom: 50px;
                right: 50px;
                width: 150px;
                height: 195px;
                display: none;
                z-index: 100;
            }
            
    
        </style>
    </head>

    <body>

        <!-- 返回顶部小火箭 -->
        
        <img src="img/gotop.gif" />
        
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> 
        <script>
            $(function(){
                $(window).scroll(function(){//scroll 页面滚动事件
                    var  sTop=$(window).scrollTop();//scrollTop  滚动距离
                    
                    if (sTop>=500) {//条件可根据需要进行修改
                        /*
                         * 都可以实现显示的作用
                         * $("img").show();
                        $("img").css("display","block")*/
                        $("img").fadeIn();
                    } else{
                        
                    /*  都可以实现隐藏的作用
                     * 
                     * $("img").hide()
                            $("img").css("display","none")*/
                        $("img").fadeOut()
                    }
                })
                
                $("img").click(function(){
                    $("body,html").animate({scrollTop:0},500)
                })
            })
        </script>
    </body>

</html>
最简单的jQuery实现页面回到顶部的功能

推荐阅读更多精彩内容
