什么是 goto-js？
goto-js 是一个用于前端的跳转工具包。它提供了多种形式的跳转方式，包括页面跳转、滚动跳转等，并支持自定义设置。同时，goto-js 可以非常方便地被集成到任意一个前端框架中。
安装
你可以通过 npm 来安装 goto-js：
npm install goto-js
使用指南
基本用法
通过以下代码可以引入 goto-js：
import Goto from 'goto-js'; const goto = new Goto();
这里我们定义了一个 goto 对象，并用 new Goto() 来进行实例化。
接下来，我们可以利用 goto 对象来进行跳转。goto-js 提供了两类跳转方式：
- 页面跳转
- 滚动跳转
页面跳转
要进行页面跳转，我们需要使用 goto.to() 方法：
goto.to('https://www.baidu.com');通过这个方法可以轻松地跳转到任意一个 URL。
滚动跳转
goto-js 还提供了一个非常棒的特性，就是可以进行滚动跳转。我们可以使用 goto.scrollTo() 方法，来滚动到指定元素：
const targetElement = document.querySelector('#target');
goto.scrollTo(targetElement);这里我们传入了一个要跳转到的元素的引用，goto-js 会自动计算出需要滚动的距离，并执行滚动操作。
进阶用法
goto-js 还提供了多种自定义设置，包括：
- 跳转时的动画
- 跳转时的回调事件
- 滚动到目标元素时的偏移量
动画
通过设置 options.animation 属性，我们可以为跳转过程添加动画效果。
const goto = new Goto({
animation: {
duration: 500, // 动画时长，默认值为 500ms
timingFunction: 'easeInOutCubic', // 缓动函数，默认值为 'easeInOutCubic'
opactiy: true // 是否启用透明度变化，默认值为 true
}
});回调
跳转时，我们可以为 goto.to() 或 goto.scrollTo() 传入一个回调函数，以在跳转完成后触发。
goto.to('https://www.baidu.com', () => {
console.log('跳转成功！');
});
goto.scrollTo(targetElement, () => {
console.log('滚动完成！');
});偏移量
默认情况下，goto-js 会将目标元素滚动到居中位置。如果需要进行调整，可以设置 options.offset 属性：
const goto = new Goto({
offset: {
x: 0,
y: -100 // 向上偏移 100 像素
}
});这里我们将目标元素向上偏移了 100 像素。
效果展示
下面是一个示例代码，展示了如何通过 goto-js 在页面中进行滚动跳转：
-- -------------------- ---- -------
--------- -----
------
------
----- -----------------
-------------- ----------
------- -----------------------------------------------------------------------------------
-------
----------------- -
------- -------
-
-------------- -
------- ------
-
------------------------------ -
----------------- ------
-
----------------------------- -
----------------- -------------
-
--------
-------
------
---- ----------------------
---- --------------------- -------------------
---- --------------------- -------------------
---- --------------------- -------------------
---- --------------------- -------------------
---- --------------------- -------------------
------
---- ---------------- ------ ------ ----- ------- -------
------- ----------------------------------------------
------- ----------------------------------------------
------- ----------------------------------------------
------- ----------------------------------------------
------- ----------------------------------------------
------
------- ---------------------------------------------------
--------
----- ---- - --- ------
---------- -
--------------- -----------------
-------- ----
--
------- -
-- --
-- ---
-
---
-------- ------------------------ -
----- ------------- - ---------------------------------------
---------------------------- -- -- -
---------------- ----------- ------
---
-
---------
-------
-------在这个示例中，我们创建了一个滚动容器，其中包含了 5 个滚动目标。右下角的按钮可以触发滚动跳转操作。通过使用 goto-js，我们可以非常方便地实现这个效果，并可以自定义调整动画、偏移量，以及设置回调函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a081e8991b448d5ed9