1. 程式人生 > >返回頂部 jQuery+css實現

返回頂部 jQuery+css實現

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>