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);
  }
}