ksmoothscroll.js是一个超轻(约1kb)的jQuery插件,它提供了一种简单的方法,可以为您的网页添加可配置的平滑滚动体验。
它允许您轻松配置滚动动画的持续时间,从各种放松功能中进行选择,设置顶部偏移等。还支持定位链接和相对链接。
1.下载ksmoothscroll插件的缩小版,并将其放在jQuery之后。
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="jquery.ksmoothscroll.min.js"></script>
2.调用该函数,插件将自动将平滑滚动动画应用于特定容器中的所有锚链接和相对链接。
$(function(){ $('body').kSmoothScroll({ // options here }); })
3.配置滚动动画的持续时间。默认值:1000ms。
$(function(){ $('body').kSmoothScroll({ duration: 500 }); })
4.对滚动动画应用缓和功能。您可能需要第三方缓解库(如jQueryUI和jQuery.leasing)来实现高级缓解功能。
$(function(){ $('body').kSmoothScroll({ easing: "swing" }); })
5.当页面上有固定的页眉导航时,设置顶部偏移。
$(function(){ $('body').kSmoothScroll({ easing: "swing", fixedHeaderHeight: 60, fixedHeaderSelector: ".header-offset:visible", }); })