[代码收集]JQuery点击悬浮小火箭返回顶部 - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2013-10-25 21:04:23 -0700

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

请勿抄袭本页面

代码说明

jquery小火箭返回顶部，滚动效果平滑，翻动页面时自动出现在右侧。建议把代码放在网页。底部转自懒人图库

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://35230.wodemo.com/entry/232493/b93eccd4cfbc90d698d2e54ea72e79a7/Top.png);
_background-image:url(http://35230.wodemo.com/entry/232493/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://35230.wodemo.com/entry/232493/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>

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

Top.png (1.84 KiB) | Meta

代码演示

看网页右侧，一艘小火箭回到顶部

[代码仅供参考，转载请注明出处]

----Comments(2)----
笑忘书 (@35230) | @ at 2013-10-25 22:13:
部分浏览器会出现不兼容…

@lvy | @ at 2013-10-25 21:45:
uc无力

Subscribe | Register | Login | N