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

 

原文地址：