
正文
JavaScript返回顶部特效
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
样式:
<style type="text/css">
/*返回顶部特效*/
a
{
border: none;
text-decoration: none;
outline: none; /*移除虚线框 IE8,FF有用*/
hide-focus: expression(this.hideFocus=true); /*IE6、IE7*/
}
*html
{
background-image: url(about:blank);
background-attachment: fixed;
} /*低版本浏览器防止抖动的,必须有*/
#tbox
{
width: 65px;
height: 140px;
float: right;
position: fixed;
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,)||)-(parseInt(this.currentStyle.marginBottom,)||)));
_margin-bottom: 50px;
}
/*这个只能改宽高其他的不要修改,需要滚动的内容都要放在这个div里面*/
#jiayi
{
display: block;
background: url({cssdir}/images/tj_QQ.png) no-repeat;
width: 65px;
height: 65px;
margin-bottom: 5px;
text-indent: -9999px;
overflow: hidden;
cursor: pointer;
} #gotop
{
display: block;
width: 65px;
height: 65px;
text-indent: -9999px;
overflow: hidden;
color: #fff;
background: url(/images/tj_fanhui.png) no-repeat;
position: absolute;
display: none;
cursor: pointer;
}
</style>
JavaScript:
<script type="text/javascript">
jQuery(document).ready(function () {
//返回顶部方法
jQuery(window).scroll(function () {
t = jQuery(document).scrollTop();
if (t > ) {
jQuery('#gotop').fadeIn('slow');
} else {
jQuery('#gotop').fadeOut('slow');
}
})
a(, ); //#tbox的div距浏览器底部和页面内容区域右侧的距离
jQuery('#gotop').click(function () {
jQuery('body,html').animate({
scrollTop:
},
); //点击回到顶部按钮,缓懂回到顶部,数字越小越快
return false;
})
//end
});
//返回顶部方法
function a(x, y) {
l = jQuery('#main').offset().left;
w = jQuery('#main').width();
jQuery('#tbox').css('left', (w + x - ) + 'px');
jQuery('#tbox').css('bottom', y + 'px');
} //获取#tbox的div距浏览器底部和页面内容区域右侧的距离函数#main为页面的可视宽度
// target[0] = {endtime};
// time_id[time_id.length] = "TimeCounter_0"
</script>
Html:
<div id="main">
</div>
<div id="tbox" style="z-index: 9999;">
<a href="http://wpa.qq.com/msgrd?v=3&uin=3118036766&Site=市政社区&Menu=yes" target="_blank"
id="jiayi">返回列表首页</a> <a id="gotop" href="javascript:void(0)" title="返回顶部">回到顶部</a>
</div>
Images:









