如何将网页SVG箭头设为可点击按钮实现平滑滚动至指定div？

问题分析 #

你已经有了一个带动画的向下箭头，需要将其转为可点击按钮，实现平滑滚动到指定ID的Div，且之前用锚点尝试未成功，当前使用Bootstrap框架。

解决方案 #

下面提供两种可靠的实现方式，你可以根据需求选择：

方式1：优化锚点法（修复之前失效问题）

如果之前锚点失效，大概率是缺少可点击容器或样式干扰，按以下步骤修改：

1. 更新CSS：给箭头添加可点击提示，并确保锚点链接样式不被Bootstrap覆盖

html {
  scroll-behavior: smooth;
}

.arrows {
  width: 60px;
  height: 72px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: 10%;
}

/* 新增：让箭头区域可点击 */
.scroll-arrow-link {
  display: block;
  cursor: pointer;
  text-decoration: none; /* 去掉锚点默认下划线 */
}

.arrows path {
  stroke: #ffffff;
  fill: transparent;
  stroke-width: 3px;
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite;
}

/* 保留原有动画CSS，修正Safari动画逻辑 */
@keyframes arrow {
  0% { opacity: 0; }
  40% { opacity: 1; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

@-webkit-keyframes arrow {
  0% { opacity: 0; }
  40% { opacity: 1; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

.arrows path.a1 { animation-delay: -1s; -webkit-animation-delay: -1s; }
.arrows path.a2 { animation-delay: -0.5s; -webkit-animation-delay: -0.5s; }
.arrows path.a3 { animation-delay: 0s; -webkit-animation-delay: 0s; }

2. 修改HTML：用锚点链接包裹SVG，指向目标Div的ID

<!-- 锚点链接，href替换为你的目标Div ID -->
<a href="#next-section" class="scroll-arrow-link">
  <svg class="arrows">
    <path class="a1" d="M0 0 L30 32 L60 0"></path>
    <path class="a2" d="M0 20 L30 52 L60 20"></path>
    <path class="a3" d="M0 40 L30 72 L60 40"></path>
  </svg>
</a>

<!-- 目标Div，必须设置对应ID -->
<div id="next-section" class="container mt-5">
  <!-- 这里是下一部分的内容 -->
</div>

锚点失效排查：

• 确认目标Div的ID与锚点href完全一致（大小写敏感）
• 检查页面是否有元素设置了overflow: hidden或scroll，可能干扰全局scroll-behavior
• 老旧浏览器不支持scroll-behavior，可改用JS方式

方式2：原生JS法（更灵活，兼容所有场景）

如果锚点法仍有问题，用JS控制滚动更可靠，步骤如下：

1. 给SVG添加ID：

<svg id="scroll-arrow" class="arrows">
  <path class="a1" d="M0 0 L30 32 L60 0"></path>
  <path class="a2" d="M0 20 L30 52 L60 20"></path>
  <path class="a3" d="M0 40 L30 72 L60 40"></path>
</svg>

<!-- 目标Div -->
<div id="next-section" class="container mt-5">
  <!-- 内容 -->
</div>

2. 添加点击事件JS：

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  const scrollArrow = document.getElementById('scroll-arrow');
  const targetSection = document.getElementById('next-section');

  if (scrollArrow && targetSection) {
    scrollArrow.style.cursor = 'pointer'; // 提示可点击
    scrollArrow.addEventListener('click', function() {
      // 平滑滚动到目标元素，block可选值：start/center/end
      targetSection.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });

      // 如果页面有固定导航栏（比如Bootstrap的navbar-fixed-top），需要调整滚动位置
      // 示例：导航栏高度为70px，减去对应值
      // window.scrollBy(0, -70);
    });
  }
});

注意事项 #

• 如果使用Bootstrap固定导航栏，滚动后目标内容可能被导航栏遮挡，可通过window.scrollBy调整偏移量，或给目标Div添加padding-top等于导航栏高度
• 已修正原CSS中Safari动画的错误逻辑（原代码中Safari下箭头始终不可见）

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