给页面添加置顶按钮,当页面滚动到一定高度时,出现置顶按钮:
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。