返回顶部

案例一：兼容常用浏览器

CSS

/*返回顶部样式*/
body{_background:url(images.gif) fixed;} /* Fixed IE6 */ 
#goTopBtn {
  position: fixed; _position:absolute; _top:expression(document.documentElement.clientHeight + document.documentElement.scrollTop - this.offsetHeight); TEXT-ALIGN: center; LINE-HEIGHT: 50px; WIDTH: 20px; HEIGHT: 50px; FONT-SIZE: 12px; CURSOR: pointer; left:50%; bottom:0; margin-left: 480px;
}

JS

<script type="text/javascript">
function goTopEx(){
  var obj=document.getElementById("goTopBtn");
  function getScrollTop(){
    return document.documentElement.scrollTop || document.body.scrollTop;
  }
  function setScrollTop(value){
    document.documentElement.scrollTop=value;
    document.body.scrollTop = value;
  }
  window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";}
  obj.onclick=function(){
    var goTop=setInterval(scrollMove,10);
    function scrollMove(){
      setScrollTop(getScrollTop()/1.2);
      if(getScrollTop()<1)clearInterval(goTop);
    }
  }
}
</script>

HTML

<!--返回顶部按钮-->
<div id="goTopBtn" style="display:none" title="返回顶部"><a href="javascript:">返回顶部</a></div>
<script type=text/javascript>goTopEx();</script>
<!--返回顶部按钮end-->

案例二

// 返回顶部代码开始
$(function(){
  // 给 window 对象绑定 scroll 事件
  $(window).bind("scroll", function(){
    // 获取网页文档对象滚动条的垂直偏移
    var scrollTopNum = $(document).scrollTop(),
        // 获取浏览器当前窗口的高度
        winHeight = $(window).height(),
        returnTop = $("div.gotop");
    // 滚动条的垂直偏移大于 0 时显示，反之隐藏
    (scrollTopNum > 0) ? returnTop.fadeIn("fast") : returnTop.fadeOut("fast");
    // 给 IE6 定位
    if (!-[1,]&&!window.XMLHttpRequest) {
        returnTop.css("top", scrollTopNum + winHeight - 200);
    }
  });
  // 点击按钮后，滚动条的垂直方向的值逐渐变为0，也就是滑动向上的效果
  $(".gotopbtn").click(function() {
      $("html, body").animate({ scrollTop: 0 }, 100);
  });
});

<div class="gotop"><ul><li class="t">站内导航</li><li><a href="/about/">关 于</a></li><li><a href="/albums/">相 册</a></li><li><a href="/blogs/">博 客</a></li><li><a href="/articles/">文 章</a></li><li><a href="/archives/">归 档</a></li><li><a href="/timeline/">时光轴</a></li><li><a href="/scrm/">通讯录</a></li><li class="gotopbtn">返回顶部</li></ul></div>

.gotop {display: none;position: fixed;left: 50%;bottom: 190px;width: 70px;margin-left: 510px;}
.gotop li{background-color:#E4E4E4; border-bottom: 1px solid #FFF; font-size:14px; text-align:center;}
.gotop li.t{padding:5px 0; background-color:#666; color:#FFF; }
.gotop li.gotopbtn{padding:5px 0; color:#FFF; background-color:#FF7700; cursor:pointer;}
.gotop li a{display:block; padding:5px; text-decoration:none; cursor:pointer;}
.gotop li a:hover{background-color:#6392C8;color:#FFF;}

添加到收藏夹js兼容Firefox及IE

英文标题： Add bookmarks with Javasript (FF/IE)

<script type="text/javascript">
function common_addFav(aLink, aTitle){
  if (window.sidebar){
    window.sidebar.addPanel(aTitle,aLink,"");
   }else if(document.all){
    window.external.AddFavorite(aLink,aTitle);
   }else if(window.opera && window.print){
   } 
}
</script>

Callback:

<a onclick="javascript:common_addFav(document.location.href,document.title);" href="javascript:void(0);">Bookmark this page</a>