Joomla项目中如何整合ScrollTo与Data-Target点击切换功能？

前置说明 #

Joomla环境下jQuery默认启用noConflict模式，需将代码中的$替换为jQuery以避免变量冲突。

示例HTML结构 #

<!-- 时间线切换按钮组 -->
<div class="timeline-pills">
  <div class="timeline-element active" data-target="#content-1">阶段1</div>
  <div class="timeline-element" data-target="#content-2">阶段2</div>
  <div class="timeline-element" data-target="#content-3">阶段3</div>
</div>

<!-- 内容切换区域 -->
<div class="timeline-content">
  <div id="content-1" class="content-item active">阶段1对应的内容</div>
  <div id="content-2" class="content-item">阶段2对应的内容</div>
  <div id="content-3" class="content-item">阶段3对应的内容</div>
</div>

<!-- 滚动目标区域 -->
<div id="influence-info" class="scroll-target">
  <!-- 这里是需要滚动到的内容 -->
</div>

整合后的jQuery代码 #

jQuery(document).ready(function() {
  // 绑定时间线元素点击事件
  jQuery('.timeline-pills .timeline-element').on('click', function() {
    // 1. 处理内容切换逻辑
    var targetContent = jQuery(this).data('target');
    // 移除所有时间线元素的active类
    jQuery('.timeline-pills .timeline-element').removeClass('active');
    // 给当前点击元素添加active类
    jQuery(this).addClass('active');
    // 隐藏所有内容项
    jQuery('.timeline-content .content-item').removeClass('active');
    // 显示目标内容项
    jQuery(targetContent).addClass('active');

    // 2. 处理滚动到influence-info区域的逻辑
    jQuery('html, body').animate({
      scrollTop: jQuery('#influence-info').offset().top
    }, 500); // 500为滚动动画时长，单位毫秒
  });

  // 保留原有的ScrollTo功能（点击带#开头href的a标签滚动）
  jQuery('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    var targetId = jQuery(this).attr('href');
    jQuery('html, body').animate({
      scrollTop: jQuery(targetId).offset().top
    }, 500);
  });
});

代码说明 #

• 内容切换：通过data-target属性关联按钮与对应内容，点击时切换active类控制显示/隐藏状态
• 滚动逻辑：使用animate方法实现平滑滚动，offset().top获取目标区域的顶部距离
• 原ScrollTo功能：保留了点击带#开头href的a标签滚动的逻辑，不影响原有页面功能

内容的提问来源于stack exchange，提问作者Dtorr1981