尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    简单实用的返回顶部效果

    作者:redroom  来源:redroom  发表时间:2009-8-21 8:32:56  点击:2963

    此返回顶部非彼返回顶部,运行演示,然后向下滚屏,然后点返回顶部。

    以下是引用片段:
    <!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>
      <!--[if lt IE 7]>
    <style type="text/css">
    #gotopbtn{position:absolute;top:expression(eval(document.documentElement.scrollTop + 350));}
    </style>
    <![endif]-->
    <style type="text/css">
    body{
     font:12px Verdana, Geneva, sans-serif;
     line-height:1.2;
     text-align:center;
    }
    #gotopbtn {
     width:100px;
     height:30px;
     background:#fff;
     position:fixed;
     bottom:100px;
     right:20px;
     display:none;
     cursor:pointer;
     font-size:14px;
     line-height:30px;
    }
    .main{
     width:100%;
     height:1500px;
     background:blue;
     margin:0 auto;
    }
    </style>
    </head>
    <body>
    <div class="main"></div>
    <div id="gotopbtn">返回顶部</div>
    <script type="text/javascript">
     idTest=document.getElementById('gotopbtn');
     idTest.onclick=function (){
      document.documentElement.scrollTop=0;
      sb();
      }
     window.onscroll=sb;
     function sb(){
      if(document.documentElement.scrollTop==0){
       idTest.style.display="none";
       }else{
        idTest.style.display="block";
        }
      }
    </script>
    </body>
    </html>

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗