返回顶部，跳到底部

scrollTop和animate的结合，使页面平滑滚动；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #full, #full-btm{ margin-left: 495px!important; width: 20px!important; height: 40px!important; position: absolute; position:fixed; left:50%; top:520px; z-index:100; text-align:center; cursor:pointer;}
        #full img, #full-btm img{ width: 100%!important; height: auto!important;}
        #full-top{
            position:fixed;
            left:50%;
            top:520px;
            margin-left:495px;
            z-index:100;
            text-align:center;
            cursor:pointer;
        }

        #full-btm{
            position:fixed;
            left:50%;
            top:550px;
            z-index:100;
            text-align:center;
            cursor:pointer;
        }
    </style>
</head>
<body style="height: 2000px;">
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>

<div id="full-btm">
    <a><img src="http://blog.jobbole.com/wp-content/themes/jobboleblogv3/_assets/img/back-btm.png" width="20" border=0 alt="跳到底部" title="跳到底部"></a>
</div>

<script type="text/javascript">
    jQuery('#full-btm').click(function(){
        jQuery('html, body').animate({scrollTop:jQuery(document).height()}, 'slow');
        return false;
    });
</script>

<div id="full-top">
    <a><img src="http://blog.jobbole.com/wp-content/themes/jobboleblogv3/_assets/img/back-top.png" width="20" border=0 alt="返回顶部" title="返回顶部"></a>
</div>

<script type="text/javascript">
    jQuery('#full-top').click(function(){
        jQuery('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
    </script>
</body>
</html>

参考 WEB前端---伯乐在线  ：http://web.jobbole.com

posted @ 2016-11-09 16:09  最爱小虾  阅读(416)  评论(0)  编辑  收藏  举报