jQuery实现页面回到顶部功能

发布时间:2019-01-12 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了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实现页面回到顶部功能全部内容,希望文章能够帮你解决jQuery实现页面回到顶部功能所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签: