当前位置:首页 > Javascript > JS返回顶部代码(带动画效果)

JS返回顶部代码(带动画效果)

//JS代码部分返回顶部

 $('#back-to-top').click(function(){
  var goTop = setInterval(function(){
   $(window).scrollTop($(window).scrollTop()/1.1)
   if($(window).scrollTop() < 1) clearInterval(goTop);
  },8);  
  return false;
 });
 $(window).scroll(function(){
  var top = $(window).scrollTop();
  if(top > 200) {
   $('#back-to-top').show();
  } else {
   $('#back-to-top').hide();
  }
 });

 

 

css样式(兼容IE6)

#back-to-top{position: fixed; _position:absolute; right: 50px; bottom: 80px; _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))); z-index: 999999;  _margin-bottom:80px;}
#back-to-top a{width: 50px;height: 50px;display: block;overflow: hidden;text-indent: -999px;background: url(images/back-to-top.gif) 0 0 no-repeat #9f9f9f;}
#back-to-top a:hover{background-position: -50px 0; background-color: #18c2c8;}
*html{background-image:url(about:blank);background-attachment:fixed;}

 

 

  • «
  • »
  • 作者:
    除非注明,本文原创:OpenFree,专注于IT互联网,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.it163.org/post/118fd1_87229e

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注


    您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>