天天看点

【整理】网站返回顶部代码

<!------------返回顶部----------->

<div id="tbox">

<a id="gotop"  href="javascript:void(0)">

    <div>回到顶部</div>

    </a>

</div>

<script type="text/javascript">

$(document).ready(function(){

/*返回顶部*/

$('#tbox').hide();

$(window).scroll(function () {

if ($(window).scrolltop() > 300) {

$('#tbox').fadein(400);//当滑动栏向下滑动时,按钮渐现的时间

} else {

$('#tbox').fadeout(0);//当页面回到顶部第一屏时,按钮渐隐的时间

}

});

$('#tbox').click(function () {

$('html,body').animate({

scrolltop : '0px'

}, 300);//返回顶部所用的时间 返回顶部也可调用goto()函数

function goto(selector){

$.scrollto ( selector , 1000);

</script>

/*------------返回顶部css样式-----------*/

#tbox { width: 32px; height: 32px; padding: 8px; border: 1px solid #eee; background: #f8f8f8 url(img/jt.png) no-repeat center; position: fixed; right: 15px; bottom: 100px; font-size:12px;text-align:center; cursor:pointer;}

#tbox div{ color:#000; display:none; background: #f8f8f8; line-height:18px;}

#tbox:hover div{ display:block;}

继续阅读