jquery点击悬浮小火箭返回顶部

2014-01-14 05:05:19 -0500

Top.png (1.84 KiB) | Meta

jquery-1.6.4.min.js (89.52 KiB) | Read | Meta | +

感谢忘叔的分享~
HTML代码

<style>
/* 回到顶部 */
 #returnTop {
_display:none;
position:fixed;
_position:absolute;
z-index:999;
right:15px;
bottom:-200px;
_bottom:auto;
text-indent:-999px;
width:36px;
height:65px;
overflow:hidden;
background-image:url(http://axdxy.wodemo.com/entry/259489/b93eccd4cfbc90d698d2e54ea72e79a7/Top.png);
_background-image:url(http://axdxy.wodemo.com/entry/259489/b93eccd4cfbc90d698d2e54ea72e79a7/Top.png);
background-repeat:no-repeat;
background-position:0 0;
transition:bottom 0.9s;
-webkit-transition:bottom 0.9s;
-moz-transition:bottom 0.9s;
-o-transition:bottom 0.9s;
}
#returnTop:hover {
background-position:0 -65px;
}
</style>
<a id="returnTop" href="javascript:;">回到顶部</a> 
<script src="http://axdxy.wodemo.com/entry/259489/77a34f3a918b1bb2f350c18497e66d36/jquery-1.6.4.min.js" type="text/javascript"></script> 
<script type="text/javascript">
var IMYUAN;
IMYUAN || (IMYUAN = {});
(function(a) {
    a.fn.extend({
        returntop: function() {
            if (this[0]) {
                var b = this.click(function() {
                    a("html, body").animate({
                        scrollTop: 0
                    },
                    120)
                }),
                c = null;
                a(window).bind("scroll",
                function() {
                    var d = a(document).scrollTop(),
                    e = a(window).height();
                    0 < d ? b.css("bottom", "200px") : b.css("bottom", "-200px");
                    a.isIE6() && (b.hide(), clearTimeout(c), c = setTimeout(function() {
                        b.show();
                        clearTimeout(c)
                    },
                    1E3), b.css("top", d + e - 125))
                })
            }
        }
    })
})
(jQuery); (function(a) {
    a("body")('<a class="close" href="javascript:;"></a>');
})
(function() {
    $("#returnTop").returntop()
});
</script>

«Newer Older»

----Comments(2)----
@nilaoda | @ at 2014-01-19 00:16:
哦，谢了

@nilaoda | @ at 2014-01-18 21:34:
收了，再问：你是如何弄这个代码框的

Back to home

Subscribe | Register | Login | N