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

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