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

最新推荐文章于 2021-06-08 11:48:56 发布

Inuyasha1121

最新推荐文章于 2021-06-08 11:48:56 发布

阅读量3.3k

点赞数

分类专栏： jquery 小功能文章标签： jquery返回顶部底部

本文链接：https://blog.csdn.net/Inuyasha1121/article/details/51604401

版权

jquery 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

小功能

17 篇文章 0 订阅

订阅专栏

实现效果：

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

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

<!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' οnclick='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' οnclick='returnTop()'>顶部</button>
    </body>
</html>

Inuyasha1121

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jquery实现返回顶部、底部功能

实现效果：页面有返回顶部、底部按钮，返回顶部按钮当页面滚动超过一屏时显示，返回底部按钮当页面到达底部时隐藏；返回时带有滚动返回效果，可控制返回速度。返回顶部/底部 //显隐按钮 function showReposBtn(){
复制链接

扫一扫