返回顶部/底部3

Posted 前端HL

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了返回顶部/底部3相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>返回顶部/底部</title>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></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>
    <div style="width: 600px; height: 500px; background: #ddd;"></div>
    <div style="width: 600px; height: 500px; background: #F8B88E;"></div>
    <div style="width: 600px; height: 500px; background: #BF6969;"></div>
    <button id=\'retopbtn\' onclick=\'returnTop()\'>顶部</button>
</body>

</html>

效果图：

 另外一种写法：

$(function(){
    //返回顶部
    $(\'#back_top\').on(\'click\',move);
    $(window).on(\'scroll\',function(){
        checkPostion($(window).height());
    });
    function move() {
        $(\'html,body\').animate({
            scrollTop:0
        },800);
    }
    function checkPostion(pos) {
        if($(window).scrollTop() > pos) {
            $(\'#back_top\').fadeIn();
        } else {
            $(\'#back_top\').fadeOut();
        }
    }
});

 

以上是关于返回顶部/底部3的主要内容，如果未能解决你的问题，请参考以下文章

如何修复重叠的片段

iOS开发CGRectGetMidX. CGRectGetMidY.CGRectGetMinY. CGRectGetMaxY. CGRectGetMinX. CGRectGetMaxX的使用(代码片段

Android 底部工作表布局边距

转到不在底部导航视图内的片段并返回后，底部导航视图不起作用

JS怎样实现点击按钮时页面缓缓向上或下移动，类似网页底部的“返回顶部”，但是很缓慢

Cordova 以黑色区域顶部和底部返回横向照片