回到顶部的问题

今天在写那个回到顶部的时候因为纯JS写的打败不了所以浏览器的兼容性所以只有从jquery入手代码如下
<div id="backtop" class="backtop">
<img src="{$cfpstaic}/2012xb/images/backtop.gif" alt="top" id="gotop" class="gotop"/>
</div>
<!-- 浮动窗口   结束 -->
<script type="text/javascript" charset="gbk" src="{$cfpstaic}/cfp2011/js/jquery.js"></script>
{literal}
<script type="text/javascript"> $('#gotop').click(function(){
 $('html,body').animate({scrollTop: '0px'}, 800);return false;
});</script>
<style>
.backtop{ 
          width:28px; 
  height:98px;
  position:fixed;
  bottom:30px;
  top:auto;
  z-index:10;
  margin-left:960px;
  }
</style>
这个呢，效果是页面展看就有那个图标。当我浏览器任意调动大小的时候，就会没有。可是我有希望刚刚出来的时候，没有滑动栏的时候这个图标不出来然后我写了写还是没有出来。于是我就在网上找到了如下的代码:
 roll压缩文件下载 http://www.cdmm.net/roll.7z这个呢，兼容效果很好，一下子就回到顶部了。
可是呢，随着浏览器窗口的调动，他就是相对浏览器定位死了
这样很不好，很影响浏览。
希望能帮我改动下，当浏览器调小的时候 回到顶部图标就没有了。

解决方案 »

  1.   

    楼主可以试设置描点。在顶部设置<a name="top"/>   
    <a href="#top">回到顶部</a>
      

  2.   


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
    body { height: 2000px; }
    </style>
    </head>
    <body>
    <script>
    ;(function(w, d){
    var o = d.createElement('div');
    d.getElementsByTagName('body')[0].appendChild(o);
    o.style.cssText = 'display:none; position:absolute; top:0; right:10px; padding:0 4px 4px; width:12px; border:1px solid #6eaae5; color:#6eaae5; font-size:12px; cursor:pointer;';
    o.innerHTML = '<div style="margin:0 0 4px 0; width:0; height:0; overflow:hidden; border:6px dashed transparent; border-bottom-style:solid; border-bottom-color:#6eaae5;"></div>回顶部';
    o.onclick = function(){
    w.scrollTo(0,0);
    }
    w.onscroll = function(){
    var sTop = d.documentElement.scrollTop || d.body.scrollTop;
    sTop ? (o.style.display = 'block', o.style.top = sTop + 200 + 'px') : o.style.display = 'none';
    }
    })(window, document);
    </script>
    </body>
    </html>楼主参考下