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

  }

}