jQuery实现页面回到顶部功能

时间：2022-04-27 12:33:03
<!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>

相关文章