zoukankan      html  css  js  c++  java
  • 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
            {
                 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;
                 65px;
                height: 65px;
                margin-bottom: 5px;
                text-indent: -9999px;
                overflow: hidden;
                cursor: pointer;
            }
            
            #gotop
            {
                display: block;
                 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:

  • 相关阅读:
    POJ 3680_Intervals
    POJ 3680_Intervals
    POJ 3686_The Windy's
    POJ 3686_The Windy's
    Codeforces 629C Famil Door and Brackets
    Codeforces 629D Babaei and Birthday Cake(树状数组优化dp)
    Codeforces 629D Babaei and Birthday Cake(线段树优化dp)
    Codeforces 628F Bear and Fair Set
    18.04.26 魔兽世界终极版
    18.4.20 STL专项练习8选6
  • 原文地址:https://www.cnblogs.com/sunzhenyong/p/4070674.html
Copyright © 2011-2022 走看看