当我们需要在 Web 应用程序中展示大量内容时，自动滚动页面是非常有用的。本文将介绍几种实现 HTML 页面自动滚动的方法，并提供相应的示例代码。
方法一：使用 JavaScript
JavaScript 是实现页面自动滚动的最常见方法之一。以下是一个基本的脚本：
function scrollDown() {
window.scrollBy(0, 1);
scrolldelay = setTimeout(scrollDown, 10);
}这个函数使用 window.scrollBy 来控制页面向下滚动的速度。我们还设置了一个 setTimeout 函数，每隔 10 毫秒就会调用一次 scrollDown 函数，以便持续滚动页面。你可以根据需要调整时间间隔来改变滚动速度。
为了启动这个函数，我们可以使用以下代码：
<body onload="scrollDown()">
这将在页面加载后立即开始滚动。
方法二：使用 CSS
CSS 提供了一些用于控制页面滚动的属性。以下是一个简单的 css 样式代码：
-- -------------------- ---- -------
---------- -
------- -------
--------- -----
---------- ------ --- ------ ---------
-
---------- ------ -
---- -
---------- --------------
-
-- -
---------- -----------------
-
-这个样式为指定的容器添加了一个高度和滚动条，并使用 animation 属性将容器向下滚动。我们使用 transform: translateY(100%) 将容器从顶部平滑向下滚动到底部，然后使用 infinite 参数使其持续进行。
为了在 HTML 页面中使用这个样式，我们可以创建一个带有指定 ID 的容器元素：
<div id="container"> <!-- 在这里添加你要显示的内容 --> </div>
方法三：使用 jQuery 插件
jQuery 是一个广泛使用的 JavaScript 库，提供了大量的插件和工具函数。以下是一个使用 jQuery 插件实现自动滚动的示例代码：
首先，在 HTML 页面中引入 jQuery：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
然后，使用一个叫做 jquery.marquee 的插件来实现滚动效果。你可以通过 CDN 引入该插件：
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.5.0/jquery.marquee.min.js"></script>
现在，我们可以在页面加载完成后使用以下代码来实现自动滚动效果：
-- -------------------- ---- -------
---------------------------- -
-----------------------
--------- ------
---- ---
----------------- --
---------- -----
----------- -----
---
---这个代码将 .marquee 类的元素向上滚动，并设置了一些选项来改变滚动速度、间距等。你可以根据需要调整这些选项。
最后，我们在 HTML 页面中创建一个带有 .marquee 类的元素：
<div class="marquee"> <!-- 在这里添加你要显示的内容 --> </div>
结论
本文介绍了三种实现 HTML 页面自动滚动的方法：使用 JavaScript、CSS 和 jQuery 插件。每种方法都有其优缺点，你可以根据需要选择适合你应用程序的方案。无论你选择哪种方法，都可以使用本文提供的示例代码来快速实现自动滚动效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31247