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,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); _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 > 50) { jQuery('#gotop').fadeIn('slow'); } else { jQuery('#gotop').fadeOut('slow'); } }) a(10, 260); //#tbox的div距浏览器底部和页面内容区域右侧的距离 jQuery('#gotop').click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 800); //点击回到顶部按钮,缓懂回到顶部,数字越小越快 return false; }) //end }); //返回顶部方法 function a(x, y) { l = jQuery('#main').offset().left; w = jQuery('#main').width(); jQuery('#tbox').css('left', (w + x - 170) + '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: