npm 包 goto-js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 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

npm 包 goto-js 使用教程