返回頂部 jQuery+css實現
阿新 • • 發佈:2019-02-06
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>