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>

你可能在找的问题:

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

标题
返回顶部