Smooth Scroll JS - 让网页滚动更加平滑

Smooth Scroll是一款Javascript库，它可以让网页的滚动更加平滑。在网页中，当我们通过点击导航栏或者滚轮滚动等方式跳转到另外一个页面位置时，这个页面会突然跳到指定位置，这种跳跃感会降低用户的体验。而通过Smooth Scroll，我们可以实现平滑的滚动效果，让用户的浏览更加舒适自然。

安装

在网页中插入以下代码：

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>

如何使用

在HTML页面里，通过管理单击鼠标来拓展页面锚的速度和滑动效果。页面的缩放层次和深入等可能导致页面重绘的延迟和卡顿，在这种情况下使用Smooth Scroll相信您的页面能够拓展更加完美。

var scroll = new SmoothScroll('a[href*="#"]', {
    speed: 1000,
    easing: 'easeInOutQuad',
    offset: 100,
    before: function() {
        console.log('开始滚动');
    },
    after: function() {
        console.log('完成滚动');
    }
});

代码片段说明：

初始化Smooth Scroll，并将所有带有 "#" 的元素链接到相应的 ID 的 URL，以使用默认值。

speed: 滚动速度（默认值：500）

easing: 使用CubicBezier实现动画形式（默认值：easeInOutCubic）

offset: 滚动偏移量（默认值：0）

before: 滚动前处理事件

after: 滚动后处理事件

和Speed和Easing相关的细节更多，我们可以从 Matthew leaned 编写扭曲表达是的一些值，这些值可以更好的控制动画舒适度。

浏览器支持

Smooth Scroll支持所有流行的浏览器，包括Chrome，Firefox，Safari，Opera和Internet Explorer 11。

总结

Smooth Scroll可以平滑滚动网页，提供了许多自定义选项，非常适合提高用户体验。它的安装和使用都非常简单，值得在网页开发中使用。