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

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

<!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