Zyro建站：实现锚点滚动且不修改页面URL的问题求助

数据老陈

2026-8-18

无URL修改的锚点滚动实现方案

核心逻辑

放弃HTML原生锚点（会修改URL），通过JavaScript监听按钮点击事件，调用scrollIntoView方法实现平滑滚动到目标区域，全程不改动页面URL。

1. 嵌入触发按钮（HTML）

在Zyro页面需要的位置添加自定义HTML代码块，插入带唯一ID的按钮：

<button id="scrollToSectionBtn" class="custom-scroll-btn">滚动到目标区域</button>

注：可按需修改按钮文本内容

2. 按钮样式美化（CSS）

将以下样式和上述HTML代码放在同一个自定义代码块中（样式可按需调整）：

.custom-scroll-btn {
  background-color: #2563eb;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}
.custom-scroll-btn:hover {
  background-color: #1d4ed8;
}

3. 头部添加滚动控制脚本（JavaScript）

在Zyro站点设置的「自定义代码」面板中，将以下脚本添加到<head>标签区域：

document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮与目标元素（替换成你实际的ID）
  const scrollBtn = document.getElementById('scrollToSectionBtn');
  const targetSection = document.getElementById('your-target-section-id');

  // 确保元素存在再绑定事件
  if (scrollBtn && targetSection) {
    scrollBtn.addEventListener('click', function(e) {
      e.preventDefault();
      // 执行平滑滚动，block参数控制对齐方式（start/center/end）
      targetSection.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    });
  }
});

关键修改点：将your-target-section-id替换为你要滚动到的section的实际ID