1、在需要添加返回顶部功能的页面的head标签中添加
<meta name="toTop" content="true">
2、添加js
$(document).ready(function($) {
if($("meta[name=toTop]").attr("content")=="true"){
$("<div id='toTop'><i class='icon-circle-arrow-up' style='font-size: 40px;color: #1E90FF'></i></div>").appendTo('body');
$("#toTop").css({
width: '50px',
height: '50px',
bottom:'10px',
right:'15px',
position:'fixed',
cursor:'pointer',
zIndex:'999999',
});
if($(this).scrollTop()==0){
$("#toTop").hide();
}
$(window).scroll(function(event) {
if($(this).scrollTop()==0){
$("#toTop").hide();
}
if($(this).scrollTop()!=0){
$("#toTop").show();
}
});
$("#toTop").click(function(event) {
$("html,body").animate({
scrollTop:"0px"},
666
);
});
}
});
注意:<i class='icon-circle-arrow-up' style='font-size: 40px;color: #1E90FF'></i>
此段代码采用了bootstrap自带的图标,若没有采用bootstrap的话,
此处用图片代替即可,即<img src="url"></img>