jquery實現返回頁面頂部功能。

xusir發表於2013-11-06
jQuery
<p id="back-to-top">
    <span></span>
</p>
<script type="text/javascript">
    $(function() {
        //首先將#back-to-top隱藏
        $("#back-to-top").hide();
        //當滾動條的位置處於距頂部100畫素以下時，跳轉連結出現，否則消失
        $(function() {
            $(window).scroll(function() {
                if ($(window).scrollTop() > 100) {
                    $("#back-to-top").fadeIn(1500);
                } else {
                    $("#back-to-top").fadeOut(1500);
                }
            });
            //當點選跳轉連結後，回到頁面頂部位置
            $("#back-to-top").click(function() {
                $('body,html').animate({
                    scrollTop : 0
                }, 300);
                return false;
            });
        });
    });
</script>
<style type="text/css">
p#back-to-top {
    position: fixed;
    bottom: 100px;
    right: 80px;
    cursor:pointer;
}

p#back-to-top  span {
    background:url(skins/images/totop.gif) no-repeat center center;
    border-radius: 6px;
    display: block;
    height: 80px;
    width: 80px;
    margin-bottom: 5px;
    /*使用CSS3中的transition屬性給<span>標籤背景顏色新增漸變效果*/
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
}

#back-to-top span:hover {
    background: url(skins/images/totop.gif) no-repeat center center;
}
</style>

不要忘記引入jquery庫

相關文章