页面添加置顶按钮

来源：互联网发布：网络视频广告表现形式编辑：程序博客网时间：2024/05/22 00:32

给页面添加置顶按钮，当页面滚动到一定高度时，出现置顶按钮：

1 添加css样式:

*-----------置顶按钮-----------*/  .to_top_btn{      width:76px;      height:54px;      background:url(../images/to-top.png);      background-position:0px 0px;      position:fixed;      bottom:95px;      color:white;      z-index:2;      cursor:pointer;      display:none;      _position:absolute;      _top:expression(eval(document.documentElement.scrollTop || document.body.scrollTop) +eval(document.documentElement.clientHeight || document.body.clientHeight)*0.7 +'px');      }  .to_top_btn:hover{      background:url(../images/to-top.png);      background-position:0px 54px;      }    /*-----------置顶按钮-----------*/

2 添加公共脚本，在window.onload中添加方法:

//初始化置顶按钮位置  $('.to_top_btn').css('right',($(window).width()-$('.container').width())/2-$('.to_top_btn').width()+"px");    //置顶按钮  $(window).scroll(function(){if($(document).scrollTop()>160){      $('.to_top_btn').fadeIn();      }else{          $('.to_top_btn').fadeOut();          }});  $('.to_top_btn').click(function(){      var timer=setInterval(function(){      if($(document).scrollTop()==0){          clearInterval(timer);          }else{      $(document).scrollTop($(document).scrollTop()-30);      }      },5);  });

3 在需要的页面中添加标签：

<div class="to_top_btn"></div>

0 0