jQuery实现页面底部滑动置顶

浏览数：27 / 时间：2015年06月09日

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现页面底部滑动置顶 | alleyloft.com</title>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //置顶按钮显示/隐藏实现
        $(window).scroll(function(){
            var w_height = $(window).height();//浏览器高度
            var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度
            if(scroll_top > w_height){
                    $("#goto-top").fadeIn(500);
                }else{
                    $("#goto-top").fadeOut(500);
            }
        });
    //置顶
    $("#goto-top").click(function(e){
            e.preventDefault();
            $(document.documentElement).animate({
                scrollTop: 0
                },200);
            //支持chrome
            $(document.body).animate({
                scrollTop: 0
                },200);
        });
    })
</script>
<style type="text/css">
    #goto-top {
        display:none;
        position:fixed;
        width:38px;
        height:36px;
        background:url(images/goto-top.png) no-repeat 0 0;
        bottom:40px;
        right:40px;
        -webkit-transition:all 0.2s;
        -moz-transition:all 0.2s;
        -o-transition:all 0.2s;
        transition:all 0.2s;
        z-index:9999;
    }
    #goto-top:hover {
        background:url(images/goto-top.png) no-repeat 0 -36px;
    }
</style>
</head>
   
<body>
    <div class="header">
        <div class="logo">
            jQuery实现页面底部滑动置顶 <span>- alleyloft.com</span>
        </div>
    </div>
    <div class="placeholder"></div>
    <div class="nav">
        <div class="ul-box">
<ul class="links">
<li><a href="http://www.alleyloft.com" target="_blank" class="cur">小巷阁楼</a></li>
<li><a href="http://www.alleyloft.com/blog" target="_blank">生活随笔</a></li>
<li><a href="http://www.alleyloft.com/share" target="_blank">技术分享</a></li>
<li><a href="http://www.alleyloft.com/psd" target="_blank">原创PSD作品</a></li>
<li><a href="http://www.alleyloft.com/html" target="_blank">静态HTML模板</a></li>
<li><a href="http://www.alleyloft.com/photo" target="_blank">个人随拍</a></li>
<li><a href="http://www.alleyloft.com/index" target="_blank">音乐欣赏</a></li>
<li><a href="http://www.alleyloft.com/aboutme" target="_blank">关于我</a></li>
</ul>
        </div>
    </div>
    <div class="con">
        <div class="show">
            <div class="banner">
                <a href="http://www.alleyloft.com/photo" target="_blank">
     <img alt="小巷阁楼-alleyloft" title="个人随拍" src="images/banner.jpg" />
                </a>
            </div>
            <div class="article">
                <!--文章内容区-->
            </div>
        </div>
    </div>
    <a href="#" title="返回顶部" id="goto-top"></a>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery实现页面底部滑动置顶