WEB返回頂部效果

1. PC端頁面返回頂部效果

 1 $( window ).scroll(function(){  
 2 　　if( $( window ).scrollTop() > 500 ){ // 當頂部的滾動距離大於500px時，顯示返回頂部按鈕 3 　　　　$('.backto_top_btn').fadeIn( 300 ); // 給返回頂部按鈕的顯示隱藏加了一個簡單的淡入淡出效果 4 }else{ 5 　　　　$('.backto_top_btn').fadeOut( 300 ); 6　　 } 7 }) 8 9 $('.backto_top_btn').click(function(){ 10 $('body,html').animate( {scrollTop: 0}, 300 ); // 點擊返回頂部按鈕，文檔在300ms內完成滾動到頂部 11 });

2. 移動端WEB頁面返回頂部效果

// 返回頂部圖標 .back_top 的顯示與隱藏
 $( window ).scroll(function(){  
     if( $( window ).scrollTop() > 500 ){ $('.backto_top_btn').show( 600 ); }else{ $('.backto_top_btn').hide( 600 ); } }) // 返回頂部的動畫（速度） $('.back_top').click(function(){ backToTop(0.3, 10); ); // 給滾動加上動畫效果 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } var x3 = window.scrollX || 0; var y3 = window.scrollY || 0; var x = Math.max(x1, Math.max(x2, x3)); var y = Math.max(y1, Math.max(y2, y3)); var speed = 1 + acceleration; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); if (x > 0 || y > 0) { var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; window.setTimeout(invokeFunction, time); } }