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

最新推荐文章于 2019-09-10 16:51:06 发布

diebaiying3731

最新推荐文章于 2019-09-10 16:51:06 发布

阅读量125

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huanghuali/p/7045667.html

版权

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

效果图：

转载于:https://www.cnblogs.com/huanghuali/p/7045667.html

diebaiying3731

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滑到离顶部一定距离显示，返回顶部和底部2

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { mar...
复制链接

扫一扫