jquery实现返回顶部、底部功能

来源：互联网发布：上海网络变卡编辑：程序博客网时间：2024/06/05 04:40

实现效果：

页面有返回顶部、底部按钮，返回顶部按钮当页面滚动超过一屏时显示，返回底部按钮当页面到达底部时隐藏；

返回时带有滚动返回效果，可控制返回速度。

<!doctype html><html>    <head>        <title>返回顶部/底部</title>        <meta http-equiv='charset' content='utf-8'/>        <script type='text/javascript' src='jquery-1.7.2.js'></script>        <script type='text/javascript'>            //显隐按钮            function showReposBtn(){                var clientHeight = $(window).height();                var scrollTop = $(document).scrollTop();                var maxScroll = $(document).height() - clientHeight;                //滚动距离超过可视一屏的距离时显示返回顶部按钮                if( scrollTop > clientHeight ){                    $('#retopbtn').show();                }else{                    $('#retopbtn').hide();                }                //滚动距离到达最底部时隐藏返回底部按钮                if( scrollTop >= maxScroll ){                    $('#rebtmbtn').hide();                }else{                    $('#rebtmbtn').show();                }            }                        window.onload = function(){                //获取文档对象                $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");                //显示按钮                showReposBtn();            }                        window.onscroll = function(){                //滚动时调整按钮显隐                showReposBtn();            }                        //返回顶部            function returnTop(){                $body.animate({scrollTop: 0},400);            }                        //返回底部            function returnBottom(){                $body.animate({scrollTop: $(document).height()},400);            }        </script>        <style type='text/css'>            #retopbtn{                position:fixed;                bottom:10px;                right:10px;            }            #rebtmbtn{                position:fixed;                top:10px;                right:10px;            }        </style>    </head>    <body>        <button id='rebtmbtn' onclick='returnBottom()'>底部</button>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <h1>a</h1>        <button id='retopbtn' onclick='returnTop()'>顶部</button>    </body></html>

0 0