如何在Liferay中实现点击头部标题滚动至对应区块/片段的功能？

没问题！在Liferay里用Fragments实现点击标题滚动到特定区块的功能其实很简单，我给你分步骤拆解：

步骤1：给目标区块设置唯一ID #

首先，你需要给每个要跳转到的Fragment区块添加唯一的ID属性：

1. 打开Liferay的Fragment Builder，找到对应内容区块的Fragment
2. 切换到HTML编辑模式，找到区块的最外层容器（通常是<div>标签）
3. 给这个容器加上id属性，比如：

   <div id="section-about" class="your-existing-classes">
     <!-- 区块内容 -->
   </div>
   

   注意：每个区块的ID必须唯一，别和页面上其他元素重复。

步骤2：给顶部标题添加锚点链接 #

接下来修改顶部导航/标题的Fragment，把标题改成指向对应区块ID的锚点链接：

1. 打开顶部标题所在的Fragment
2. 把原来的标题文本（比如<h3>关于我们</h3>）改成带href属性的链接：

   <a href="#section-about" class="scroll-title">关于我们</a>
   

   这里的href="#section-about"就是对应步骤1里设置的目标区块ID，前面必须加#。

步骤3：可选：添加平滑滚动效果（优化体验） #

默认的锚点跳转是瞬间定位的，要是想要更流畅的平滑滚动，有两种方式：

方式一：用CSS快速实现 #

在任意Fragment的CSS编辑区添加以下代码：

html {
  scroll-behavior: smooth;
}

这个方法简单，但没法处理固定导航栏挡住区块顶部的情况。

方式二：用JS自定义滚动（适配固定导航） #

如果你的页面有固定在顶部的导航栏，跳转后可能会挡住区块的开头，这时候可以用JS来调整滚动位置：
在顶部标题Fragment的JS编辑区添加以下代码：

// 给所有带scroll-title类的链接绑定点击事件
document.querySelectorAll('.scroll-title').forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止默认的锚点跳转行为
    e.preventDefault();
    // 获取目标区块的ID
    const targetId = this.getAttribute('href');
    // 找到目标元素
    const targetElement = document.querySelector(targetId);
    
    if (targetElement) {
      // 计算滚动位置：目标元素顶部 - 导航栏高度（比如80px，根据你的导航高度调整）
      const scrollPosition = targetElement.offsetTop - 80;
      // 平滑滚动到目标位置
      window.scrollTo({
        top: scrollPosition,
        behavior: 'smooth'
      });
    }
  });
});

同时可以给链接加个样式，去掉默认的下划线：

.scroll-title {
  text-decoration: none;
  color: inherit; /* 继承父元素的颜色，保持和原来的标题样式一致 */
  cursor: pointer;
}

最后：测试验证 #

保存所有修改的Fragment后，发布页面，点击顶部的标题，就能看到页面平滑滚动到对应区块啦！

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