JQuery返回置顶

html部分

<div class="wrap"></div>
<div id="goTopBtn" class="goTopBtn"><a href="javascript:;" title="我要上去!" alt="回到顶部" /></a></div>


css部分

<style type="text/css">
body { height: 3600px;}
.wrap { width:980px; height:1200px; border:1px #000 solid; margin:0 auto; }
.goTopBtn { position:fixed;display:none; text-align:center; line-height:30px; width:30px; bottom:35px; height:33px; font-size:12px; cursor:pointer;}

/* IE6 底部固定 */
* html .goTopBtn  {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)));}

/* html,* html body /* 
修正IE6振动bug */{background-image:url(about:blank);    /*用浏览器空白页面作为背景*/ background-attachment:fixed; /* prevent screen flash in IE6 确保滚动条滚动时,元素不闪动*/}
</style>


JQ部分

$(function(){
   $(window).scroll(function () {
     if($(window).scrollTop() >= 300)//距离顶部多少高度显示按钮
     {
     $('#goTopBtn').slideDown(200);
     }else
     {
     $('#goTopBtn').slideUp(200);
     }
   }); 
     
   $('#goTopBtn').click(function(){
    $('body,html').animate({scrollTop:0},500)
   });
   
   //按钮定位
   var win_width= $(window).width();      //窗口宽度
   var content_width= $('.wrap').width();     //容器宽度
   var topbtn_width= $('#goTopBtn').width(); //按钮宽度
   //alert([win_width - content_width]/2);
   
//距离主体部分的右侧距离
   var topbtn_posi = ([win_width - content_width ]/2 - topbtn_width - 10);
   $('#goTopBtn').css({'right':topbtn_posi});
   
 })
定位部分可自己定义
posted on 2013-06-17 08:52  灿先森  阅读(359)  评论(0)    收藏  举报