jQuery平滑滚动链接颜色更改不起作用

jQuery是一款流行的JavaScript库，用于简化HTML文档遍历、事件处理、动画效果等操作。它提供了丰富的API和插件，可以帮助开发者快速构建交互式的前端页面。

在jQuery中实现平滑滚动链接颜色更改的效果，可以通过以下步骤完成：

引入jQuery库文件。在HTML页面的<head>标签中添加以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

创建滚动链接和目标区域。在HTML页面中，创建带有滚动链接的菜单和相应的目标区域，例如：

<nav>
  <ul>
    <li><a class="scroll-link" href="#section1">Section 1</a></li>
    <li><a class="scroll-link" href="#section2">Section 2</a></li>
    <li><a class="scroll-link" href="#section3">Section 3</a></li>
  </ul>
</nav>

<section id="section1">Content 1</section>
<section id="section2">Content 2</section>
<section id="section3">Content 3</section>

编写jQuery代码实现平滑滚动和颜色更改。在页面的<script>标签中，添加以下代码：

$(document).ready(function() {
  $('.scroll-link').click(function(e) {
    e.preventDefault(); // 阻止默认的滚动行为
    var targetId = $(this).attr('href'); // 获取目标区域的ID
    var targetOffset = $(targetId).offset().top; // 获取目标区域的偏移量
    $('html, body').animate({
      scrollTop: targetOffset
    }, 1000); // 使用动画效果滚动到目标区域，并设置滚动时间为1秒
    $(this).css('color', 'red'); // 更改链接颜色为红色
  });
});

在上述代码中，首先使用$(document).ready()函数确保页面加载完成后执行代码。然后，通过选择器.scroll-link选中滚动链接，使用.click()函数监听点击事件。在点击事件处理函数中，通过e.preventDefault()阻止默认的滚动行为。接着，使用$(this).attr('href')获取目标区域的ID，再利用$(targetId).offset().top获取目标区域相对于文档顶部的偏移量。最后，使用.animate()函数实现平滑滚动，并使用.css()函数将点击的链接颜色更改为红色。

通过以上步骤，就可以实现点击滚动链接时，页面平滑滚动到相应的目标区域，并将点击的链接颜色更改为红色。同时，可以根据具体需求进行更多样式和动画效果的定制。

腾讯云相关产品推荐：