网页返回顶部浮动图标代码

CSS

<style>

<!--

.back-to {

    bottom: 35px;

    overflow: hidden;

    position: fixed;

    right: 10px;

    width: 110px;

    z-index: 999;

}

.back-to .back-top {

    background: url("http://static.wetui.com/img/page-back-top.png") no-repeat scroll 0 0 transparent;

    display: block;

    float: right;

    height: 50px;

    margin-left: 10px;

    outline: 0 none;

    text-indent: -9999em;

    width: 50px;

}

.back-to .back-top:hover {

    background-position: -50px 0

}

-->

</style>

 

HTML

<div style="display:none;" class="back-to" id="toolBackTop">

<a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top">

返回顶部</a>

</div>

 

[先需要引入jQuery库哟！]JS

$j(document).ready(function () {

        var bt = $j('#toolBackTop');

        var sw = $j(document.body)[0].clientWidth;

 

        var limitsw = (sw - 840) / 2 - 80;

        if (limitsw > 0){

                limitsw = parseInt(limitsw);

                bt.css("right",limitsw);

        }

 

        $j(window).scroll(function() {

                var st = $j(window).scrollTop();

                if(st > 30){

                        bt.show();

                }else{

                        bt.hide();

                }

        });

});

 

Image

 

原文地址：http://www.ccvita.com/427.html