平滑滚动插件,源自 Zepto 作者。
如果要支持旧版 IE,可以使用下面的代码实现:
$('html, body').animate({scrollTop: 0}, '500');
<button data-am-smooth-scroll class="am-btn am-btn-success">滚动到顶部</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>
<button data-am-smooth-scroll="{position: 57, speed: 5000}" class="am-btn am-btn-danger">慢悠悠地滚到距离顶部 57px 的位置</button>
在元素上添加 data-am-smooth-scroll
属性。
<button data-am-smooth-scroll class="am-btn am-btn-success">滚动到顶部</button>
如果要指定滚动的位置,可以给这个属性设一个值。
<button data-am-smooth-scroll="{position: 189}" class="am-btn am-btn-secondary">...</button>
为了保证不同浏览器兼容,请在 $(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`,根据距离判断 |