jQuery 实现页面滚动到指定位置和返回顶部

wangteng1082020-07-25 19:59

用 jQuery 实现页面滚动到指定位置和返回顶部。

1、滚动到指定位置

/*
 * 页面滚动到指定位置
 * element ID 要到达的位置id 不传值等价于返回顶部
 * offset 到达指定位置后页面向下偏移的的距离 默认 100 (单位 px)
 * speed 速度 默认 500 (单位 毫秒)
 */

function scrollTo(element, offset, speed) {
  if (typeof(offset) == 'undefined') {
    offset = 100;
  }
  if (typeof(speed) == 'undefined') {
    speed = 500;
  }
  if (typeof(element)== 'undefined') {
    $("html,body").animate({scrollTop:0}, speed);
  }else{
    if (element.length > 0) {
      $("html,body").animate({scrollTop:$(element).offset().top - offset},speed);
    }
  }
}

用法:

scrollTo('#ID', 100, 600);

2、返回顶部

/*
 * 返回顶部
 * speed 速度 默认 500 (单位 毫秒)
 */

function scrollTop(speed) {
  if (typeof(speed) == 'undefined') {
    speed = 500;
  }
  $("html,body").animate({scrollTop:0}, speed);
}

用法:

scrollTop(1000);
小教程(本文)仅供参考学习,如用于商业带来的问题,本站概不负责。
关注公众号
关注公众号

©2020 IT自习室京ICP备20010815号