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:

posted @ 2014-11-03 10:52  Coding_Yong  阅读(230)  评论(0编辑  收藏  举报