页面添加置顶按钮

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

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>
   

   
   

说明：top图标在附件中，可以自定义图标，修改CSS样式即可！目前是宽：76px,高：108px。

最后

以上就是辛勤芹菜为你收集整理的页面添加置顶按钮的全部内容，希望文章能够帮你解决页面添加置顶按钮所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。