本教程详细阐述如何利用javascript和jquery为html元素创建平滑的循环自动滚动功能，使其内容在上下方向持续滚动。同时，文章还将指导您如何集成鼠标悬停暂停效果，提升用户体验，确保在用户需要阅读特定内容时，滚动行为能够及时停止。

一、引言

在网页设计中，有时我们需要在有限的区域内展示大量内容，例如新闻列表、公告板或产品特色。为了优化空间利用和内容展示，实现一个自动滚动且能循环往复的组件变得尤为实用。更进一步，为了提供良好的用户体验，我们还需要在用户对滚动内容感兴趣时，提供暂停功能。本教程将指导您如何使用jQuery实现一个具备循环上下滚动和鼠标悬停暂停功能的HTML内容区域。

二、核心技术概览

实现此功能主要依赖以下前端技术：

• jQuery库: 简化DOM操作、事件处理和动画效果。
• scrollTop属性: 控制或获取元素垂直滚动条的位置。
• scrollHeight属性: 获取元素内容的总高度（包括被隐藏的部分）。
• animate()方法: jQuery提供的强大动画方法，用于平滑地改变CSS属性，如scrollTop。
• mouseenter和mouseleave事件: 用于检测鼠标进入和离开元素区域，实现暂停和恢复功能。

三、HTML结构准备

首先，我们需要一个包含可滚动内容的HTML div 元素。这个 div 将作为我们自动滚动的目标容器。

<div id="div1">
  <!-- 放置大量内容，确保其高度超过容器高度以触发滚动条 -->
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
</div>
<!-- 引入jQuery库，通常放在</body>标签前 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

四、CSS样式定义

为确保 div 元素具有固定的高度和宽度，并且在内容溢出时显示滚动条，我们需要定义相应的CSS样式。

立即学习“Java免费学习笔记（深入）”；

#div1 {
  height: 100px; /* 固定高度 */
  width: 200px;  /* 固定宽度 */
  border: 1px solid #ccc; /* 边框 */
  overflow: auto; /* 内容溢出时显示滚动条 */
}

五、JavaScript逻辑实现

核心的滚动和暂停逻辑将通过JavaScript（结合jQuery）实现。

Lesishu SEO Guide

SEO全流程：诊断、页面优化、技术SEO、内容策略、外链建设；触发关键词包括SEO、搜索排名、网站优化、关键词、标题描述、结构化数据、Core Web Vitals、sitemap、robots.txt、SEO审计等。

下载

1. 状态变量定义

为了控制滚动的行为和状态，我们需要定义几个关键变量：

var scrollSpeed = 5000;    // 滚动动画完成一次所需时间（毫秒）
var scrollDirection = 1;   // 滚动方向：1为向下，-1为向上
var paused = false;        // 全局暂停标志
var isMouseOver = false;   // 鼠标是否悬停在元素上

2. startScroll() 函数

这个函数是实现自动滚动循环的核心。它负责根据当前滚动方向启动动画，并在动画完成后切换方向并重新调用自身，形成循环。

function startScroll() {
  var div1 = $('#div1');
  var divHeight = div1.height();           // 容器可见高度
  var scrollHeight = div1.prop('scrollHeight'); // 内容总高度

  // 如果内容高度不大于容器高度，则无需滚动
  if (scrollHeight <= divHeight) {
    return;
  }

  // 只有在未暂停且鼠标未悬停时才执行滚动
  if (!paused && !isMouseOver) {
    if (scrollDirection === 1) { // 当前方向为向下
      // 向下滚动到最底部 (scrollHeight - divHeight 是实际可滚动到的最大值)
      div1.animate({ scrollTop: scrollHeight - divHeight }, scrollSpeed, 'linear', function() {
        scrollDirection = -1; // 滚动到底部后，将方向改为向上
        startScroll();        // 再次调用，启动向上滚动
      });
    } else { // 当前方向为向上
      // 向上滚动到最顶部
      div1.animate({ scrollTop: 0 }, scrollSpeed, 'linear', function() {
        scrollDirection = 1;  // 滚动到顶部后，将方向改为向下
        startScroll();        // 再次调用，启动向下滚动
      });
    }
  }
}

说明: 在 animate 方法中，第三个参数 'linear' 指定了动画的缓动效果，使其滚动速度