所在位置:首页 > 学习心得 > jquery实现返回顶部代码
jquery实现返回顶部代码
  • jquery实现返回顶部代码
    发布时间:2011-06-26 类别:javascript技术 来源:侠客工作室
    • 1
    • 2
    • 3
    • 4
    • 5
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>返回顶部</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    #gotop {
     background-attachment: scroll;
     background-color: transparent;
     background-image: url("images/topback.jpg");
     background-position: 0 0;
     background-repeat: no-repeat;
     bottom: 10%;
     display: block;
     height: 80px;
     overflow-x: hidden;
     overflow-y: hidden;
     position: fixed;
     text-indent: -9em;
     width: 24px;
    }
    </style>
    </head>

    <body>
    <script>
        /****************************返回顶部SizeLink****************************/
        $(document).ready(function() {
      $(‘#gotop‘).hide();
            $(‘<a href="#" id="gotop">返回顶部</a>‘).appendTo(‘body‘).hide().click(function() {
                $(document).scrollTop(0);
                $(this).hide();
                return false
            });
            var $gotop = $(‘#gotop‘);
            function backTopLeft() {
                var btLeft = $(window).width() / 2 + 500;
                if (btLeft <= 980) {
                    $gotop.css({
                        ‘left‘: 985
                    })
                } else {
                    $gotop.css({
                        ‘left‘: btLeft
                    })
                }
            }
            backTopLeft();
            $(window).resize(backTopLeft);
            $(window).scroll(function() {
                if ($(document).scrollTop() === 0) {
                    $gotop.hide()
                } else {
                    $gotop.show()
                }
                if ($.browser.msie && $.browser.version == 6.0 && $(document).scrollTop() !== 0) {
                    $gotop.css({
                        ‘opacity‘: 1
                    })
                }
            })
        });
    </script>
    <div style="width:1000px; height:1400px;">
      <p>本工作室是专业的网站制作工作室,我们承揽一切中小企业网站的建设,发行,管理,并从中收取一定的费用。</p>
      <p>本工作室主要做以下类型的网站asp+access,asp+sql,asp.net+sql,asp.net+access,php+mysql,我们根据客户的要求对整站规划,整站设计,整站代码的编写,如有不满意,我们将根据您的要求进行修改,最终让您满意。我们的宗旨是客户的要求是我们要求,客户的满意才是我们的满意。我们的收费情况根据您网站的要求,网站的功能等方面而定,但我们的收费将是最低的,让您花最少的钱,拿到最好的网站。 </p>
      <p>我们承诺凡是在本工作室做的网站,我们将一直对其进行技术支持,前提条件您的网站没有进行二次开发,在网站底部仍保留我们技术支持的字样,此项支持仅对系统漏洞是免费的,但增加网站功能,修改网站界面,我们还是要收取费用的。您的网站如果进行了二次开发,我们可以尽量帮助您修改,但不能保证修改好,这我们工作人员将收取小额费用。</p>
    </div>
    <a id="gotop" href="#" style="display: block; left: 1174.5px;">返回顶部</a>
    </body>
    </html>

  • ☆☆☆技术交流群:5684178☆☆☆
  • 上一篇:Google jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
  • 下一篇:js去除字符串中空格的方法
侠客工作室主要承揽网站制作|企业建站|北京网站制作|北京网站建设|北京企业建站|专业仿站|SEO优化等业务
地址:北京市海定区清河水木天成 电话:13718388147 13718388147 传真:13718388147 访问统计:
投诉电话:13718388147 投诉QQ:点击这里给我发消息 客服信箱:1300105556@qq.com 邮编:102200 北京网站建设地图 北京网站建设RSS地图
版权所有 2009-2014侠客工作室【北京网站建设】 京ICP备11021494号-1