Amaze UI

Smooth Scroll


平滑滚动插件,源自 Zepto 作者

平滑滚动不支持 IE 9 及以下版本!使用时请注意。

如需支持旧版 IE,可以使用下面的代码实现:

$('html, body').animate({scrollTop: 0}, '500');

基础用法

滚动到顶部

Copy
<button data-am-smooth-scroll class="am-btn am-btn-primary">滚动到顶部</button>
<button id="doc-scroll-to-btm" class="am-btn am-btn-primary">滚动到底部</button>

<script>
  $('#doc-scroll-to-btm').on('click', function() {
    var $w = $(window);
    $w.smoothScroll({position: $(document).height() - $w.height()});
  });
</script>

使用向元素添加 smoothScroll 属性或者通过 事件绑定 来执行平滑滚动效果。

在线运行

定义选项

Copy
<button data-am-smooth-scroll="{position: 57, speed: 5000}" class="am-btn am-btn-primary">慢悠悠地滚到距离顶部 57px 的位置</button>

通过向 data-am-smooth-scroll 属性传参来执行平滑滚动效果。

  • position 滚动至
  • speed speed

在线运行

使用方法

通过 Javascript

为了保证不同浏览器兼容,请在 $(window) 上调用 $().smoothScroll() 方法。

$(window).smoothScroll([options])
// 滚动到底部
$('#my-button').on('click', function() {
  var $w = $(window);
  $w.smoothScroll({position: $(document).height() - $w.height()});
});

选项说明

参数类型默认描述
position数值0要滚动到位置,默认为 `0`,即滚动到顶部
speed数值750 ~ 1500滚动速度,单位 `ms`,默认为 `750 - 1500`,根据距离判断