首页 > 代码库 > 滑到离顶部一定距离显示，返回顶部和底部2

滑到离顶部一定距离显示，返回顶部和底部2

2024-10-08 08:55:39   216人阅读

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    #icon_top_end{ display: none;}
    
    #back-top {
        position: fixed;
        bottom: 20px;
        right: 2%;
        z-index: 100;
       
    }
    
    #back-end {
        position: fixed;
        bottom: 40px;
        right: 2%;
        z-index: 100;
    }
    </style>
</head>

<body>
    <!-- 侧边栏 按钮-->
    <div style="width: 200px; height: 500px; background-color: #ccc; margin: 0 auto;"></div>
    <div style="width: 200px; height: 500px; background-color: #ccc; margin: 0 auto;"></div>
    <div style="width: 200px; height: 500px; background-color: #ccc; margin: 0 auto;"></div>
    <div style="width: 200px; height: 500px; background-color: #edfefe; margin: 0 auto;"></div>
    <div id="icon_top_end">
    <div id="back-top">
        <button class="styled-button">TOP</button>
    </div>
    <div id="back-end">
        <button class="styled-button">Bottom</button>
    </div>
    </div>
    <!--底部 内容-->
    <div id="footer"></div>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
                /**
                 * 回到顶部
                 */
                $(window).scroll(function() {
                        if ($(this).scrollTop() > 100) {
                            $(‘#icon_top_end‘).show(‘slow‘);
                        } else {
                            $(‘#icon_top_end‘).hide(‘slow‘);
                        }
                    });
                    $(‘#back-top‘).click(function() {
                        $(‘html,body‘).stop();
                        $(‘html,body‘).animate({
                            scrollTop: ‘0px‘
                        }, 1000);
                    });

                    /**`1
                     * 回到底部
                     */
                    $(‘#back-end‘).click(function() {
                        $(‘html,body‘).stop();
                        $(‘html,body‘).animate({
                            scrollTop: $(‘#footer‘).offset().top
                        }, 1000);
                    });
                });
    </script>
</body>

</html>

效果图：

技术分享

 

滑到离顶部一定距离显示，返回顶部和底部2


联系
我们