jQuery--制作回到顶部的效果

jQuery–制作回到顶部的效果

瞬间滚动到顶点

 $('#to-top').click(function(){
      //瞬间滚动到顶点
     $('html,body').scrollTop(0);
 }

show–before

show–after

= =========== =================

间隔滚动到顶点

• 总距离
  var distance = $ (‘html’).scrollTop()+$(‘body’).scrollTop();

• 总时间
  var time = 500;

• 时间间隔
  var intervalTime = 50;

• 一次间隔的距离
  var itemDistance = distance/(time/intervalTime);

• 使用循环定时器不断滚动
  distance-=itemDistance;
  $ (‘html,body’).scrollTop(distance);

  【注意：
  读取滚动scrollTop值使用 (兼容IE与chrome)
  $ (‘html’).scrollTop()+$ (‘body’).scrollTop();

  设置scrollTop值使用
  $(‘html,body’). scrollTop(设置的值)
  】

• 判断是否到达顶部，停止定时器
  if(distance<=0){
  distance=0;
  clearInterval(intervalId);
  }

  $('#to-top').click(function(){
       

          //间隔滚动到顶点
          //总距离
          var $page = $('html,body');
          var distance = $('html').scrollTop()+$('body').scrollTop();

          //总时间
          var time = 500;

          //间隔时间
          var intervalTime = 50;

          //一次的距离
          var itemDistance = distance/(time/intervalTime);

          //使用循环定时器不断滚动
          var intervalId = setInterval(function(){

            //判断是否到达顶部，停止定时器
            if(distance<=0){
                distance=0;
                clearInterval(intervalId);
            }

            distance-=itemDistance;
            $page.scrollTop(distance);
          },intervalTime)


      })
      })

show-before

show-after