介绍
在前端开发过程中，我们常常需要用到滚动效果。jQuery是一个很常用的JavaScript库，而jquery.scrollto是一款用于实现滚动效果的jQuery插件。它可以让页面跳转到指定位置并且可以平滑的滚动到目标区域，提高用户体验。下面我们详细讲解如何使用npm包jquery.scrollto。
安装
在使用之前，我们需要先安装jquery.scrollto，可以使用npm进行安装：
npm install jquery.scrollto --save
使用
jquery.scrollto使用非常简单，只需要引入jQuery和jquery.scrollto插件后，便可以立即使用scrollTo方法。使用scrollTo方法实现滚动效果，方法内可以传入DOM元素，DOM元素的id，以及DOM元素在文档中的像素坐标。
$('#goToTop').click(function () {
$.scrollTo(0, 1000);
});代码中，我们在点击#goToTop元素时执行$.scrollTo(0, 1000)，表示在1000毫秒内，将当前页面的滚动条滚到文档的顶部。
高级使用
jquery.scrollto插件还提供了更多的高级使用方法。例如通过“easing”来设置滚动效果，通过“axis”限制滚动的方向等。
Easing
Easing是一种让动画变得平滑的技术，通过调整动画关键帧之间的时间和速度来实现。jquery.scrollto提供了多种Easing的方式。
$(window).scrollTo('100%', {
duration: 1000,
easing: 'easeOutQuart'
});上面的代码在1000毫秒内，将滚动条滚动到文档流的100%高度，并且使用“easeOutQuart”的Easing。
Axis
Axis可以限制scrollTo只在水平或竖直方向滚动。
$.scrollTo('#target', {
duration: 1000,
axis: 'y'
});上面的代码在1000毫秒内，将滚动条滚动到id为“target”的元素处，并只在竖直方向上滚动。
示例
下面是一个完整的使用jquery.scrollto的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------- ------------
-------
---- -
------- -------
------- - -----
-
-------- -
--------- ------
------- -----
------ -----
-------- -----
---------- -----
-
--------
-------
------
----
------ -------- ------------------------------- ----------
------ -------- ------------------------------- ----------
------ -------- ------------------------------- ----------
-----
---- ------------- -------------- --------------- -------
---- ------------- -------------- --------------- -------
---- ------------- -------------- --------------- -------
------- -------------------------
------- -----------------------------------------------------------
------- ----------------------------------------------------------------------------------------------
--------
-------------
-----------------------------
-----------------------
--- ------ - -----------------------
------------------ ------
---
----------------------------
-- -------------------- - ---- -
-----------------------
- ---- -
------------------------
-
---
---------------------------- -- -
------------- ------
------ ------
---
---
---------
-------
-------以上示例代码中，首先在页面中定义了3个Section，并添加了一个链接在点击时通过data-scroll属性调用$.scrollTo方法实现滚动效果。通过监听window的scroll事件来控制回到顶部按钮的显示隐藏。在点击回到顶部按钮时，通过$.scrollTo方法实现回到顶部的效果。
结论
在实现页面滚动效果时，jquery.scrollto是一个非常好用的插件，使用npm安装后，可以方便地引入到项目中使用。通过Easing和Axis的设置，可以实现更加丰富的滚动效果，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb417b5cbfe1ea0611230