前言
在 web 应用的开发中，我们经常需要对页面内的锚点进行操作，让用户可以无缝地跳转到想要浏览的页面位置，并且能够保持页面的状态。而 deep-linker 就是一款非常强大的 npm 包，它可以为页面内的锚点进行监听，并且提供一种易用的方式来实现无缝跳转。
安装
首先，我们需要安装 deep-linker：
npm i deep-linker
使用方法
监听 URL 变化
在页面内引入 deep-linker 后，我们需要进行初始化操作，将需要监听的元素选择器传入。比如，我们需要监听所有 h2 标题后的跳转链接，可以进行如下的初始化操作：
import deepLinker from 'deep-linker';
deepLinker('.content h2 a[href^="#"]');这里提供了一个选择器给 deep-linker，它会监听所有匹配到的链接，一旦 URL 的 hash 值与这些链接的 href 匹配，相应的链接元素就会被加上 .dl-active 的 class，方便我们进行样式处理。
无缝跳转
在初始化完成后，我们的页面锚点已经被成功监听。现在，我们只需要使用 deepLinker 提供的 scrollTo 方法，就可以实现无缝跳转了。
import deepLinker from 'deep-linker';
deepLinker('.content h2 a[href^="#"]');
// triggers a scroll to the element with 'id="section-3"'
deepLinker.scrollTo('section-3');这里的 scrollTo 方法接收一个字符串，代表目标元素的 ID。它会在页面上找到对应的元素，然后自动滚动到该元素位置。
例子
针对上述内容，我们可以提供一个示例进行更好的理解:
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
----------- ------ ---------------
-------
-- --------- --- ------ ------ ---- --
---------- -
------ ----
------------ -----
-
-- ------- - ------ ---- ---- --- ------ ---- -- ------- --
------------------ -
-------- -----
-------------- --- ----- ----
-
--------
-------
------
-----
----
------ ------------------------- ----------
------ ------------------------- ----------
------ ------------------------- ----------
------ ------------------------- ----------
------ ------------------------- ----------
-----
------
------
--------
-------- ------ ------------
---------
-------- ---------------
--------
------ ------------------------- ----------
---------
-------- ----- ----- --- ----- ----------- ----------- ----- ----------- ------ -------- ----- -- ------- ---------- ---------- ---------- --------- --------- ------- ------- -- ---- ---- ------ ------- ---- ----------- -----------------
----------
-------- ---------------
--------
------ ------------------------- ----------
---------
-------- ----- ----- --- ----- ----------- ----------- ----- ----------- ------ -------- ----- -- ------- ---------- ---------- ---------- --------- --------- ------- ------- -- ---- ---- ------ ------- ---- ----------- -----------------
----------
-------- ---------------
--------
------ ------------------------- ----------
---------
-------- ----- ----- --- ----- ----------- ----------- ----- ----------- ------ -------- ----- -- ------- ---------- ---------- ---------- --------- --------- ------- ------- -- ---- ---- ------ ------- ---- ----------- -----------------
----------
-------- ---------------
--------
------ ------------------------- ----------
---------
-------- ----- ----- --- ----- ----------- ----------- ----- ----------- ------ -------- ----- -- ------- ---------- ---------- ---------- --------- --------- ------- ------- -- ---- ---- ------ ------- ---- ----------- -----------------
----------
-------- ---------------
--------
------ ------------------------- ----------
---------
-------- ----- ----- --- ----- ----------- ----------- ----- ----------- ------ -------- ----- -- ------- ---------- ---------- ---------- --------- --------- ------- ------- -- ---- ---- ------ ------- ---- ----------- -----------------
----------
-------
------- --------------------------------------------------------------------------------
--------
-------------------- -- ---------------
-- ------- -- --- ------- ---- -----------------
---------------------------------
---------
-------
-------总结
deep-linker 是一个非常实用的 npm 包，它可以帮助我们轻松地监听页面 URL 的变化，并且实现无缝跳转。相信阅读完本文，大家已经掌握了使用 deep-linker 的基本方法，并且可以将它应用到自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005555581e8991b448d287a