jquery-scrollintoview 是一个 jQuery 插件，可以让指定的元素滚动到视图中心或者顶部。这对于实现页面内锚点导航、表格内跳转等功能非常有用。本文将详细介绍该插件的使用方法。
安装
在项目目录下运行以下命令安装：
npm install jquery-scrollintoview --save
该插件依赖于 jQuery ，因此需要先安装 jQuery ：
npm install jquery --save
使用
首先，在 HTML 文件中引入 jQuery 和 jquery-scrollintoview ：
<script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/jquery-scrollintoview/jquery.scrollintoview.min.js"></script>
然后就可以在 JavaScript 中使用了。例如，以下代码将 #my-element 元素滚动到视图中心：
$('#my-element').scrollIntoView();如果希望将元素滚动到视图顶部，可以传递一个对象参数：
$('#my-element').scrollIntoView({
complete: function() {
$(this).css('background-color', 'yellow');
}
});complete 函数在滚动完成后执行，可以添加一些自定义的操作。
除此之外，还有其他可选的参数，例如 duration 表示滚动持续时间（默认为 400 毫秒）：
$('#my-element').scrollIntoView({
duration: 1000
});示例
以下示例展示了如何实现一个锚点导航：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
-----
----
------ ------------------------ ----------
------ ------------------------ ----------
------ ------------------------ ----------
------ ------------------------ ----------
-----
------
---- ------------- -------------- ------ ----------------- ------------- -------
---- ------------- -------------- ------ ----------------- -------------- -------
---- ------------- -------------- ------ ----------------- --------------- -------
---- ------------- -------------- ------ ----------------- ---------------- -------
------- ------------------------------------------------------
------- -------------------------------------------------------------------------------
--------
------ --------------------- -
-------------------
--- ------ - ---------------------
----------------------------------- -------
---
---------
-------
-------在该示例中，点击导航栏中的链接时，会将对应的 section 滚动到视图中心。
总结
jquery-scrollintoview 可以很方便地实现滚动到指定元素的功能，尤其适用于需要实现一些特殊效果的页面。它的使用方法也非常简单，只需几行代码即可实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37801