如何实现按钮平滑滚动到页面指定区块？（仅可访问<head>）

问题背景 #

我尝试给页面上的按钮添加点击跳转至指定区块的功能，但多种方案均未生效。当前使用的按钮及脚本代码如下：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik">

<div>
<button id="comeceagora">
<span></span>
<span></span>
<span></span>
<span></span> Comece Agora!
</button>
</div>

<style>
@media screen and (max-device-width : 1020px) {

button {
font-size: 15px!important;
animation: glow 1s ease-in-out infinite alternate;
transition-delay: 0.6s;
}

@-webkit-keyframes glow{
  from {
   box-shadow: 0 0 10px #00f498, 0 0 15px #00f498, 0 0 25px #00bcaa, 0 0 50px #00f498;
  }
  
  to {
    box-shadow: 0 0 10px #00f498, 0 0 25px #00bcaa, 0 0 50px #00f498, 0 0 55px #00f498;
  }
}

}
div {
margin: auto;
text-align: center;
padding: 60px;
}

button {
 position: relative;
 padding: 1em 2em;
 outline: none;
 border: 1px solid #303030;
 background: #000000;
 color: #00F498;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 25px;
 overflow: hidden;
transition: 0.2s;
border-radius: 20px;
cursor: pointer;
font-family: "Rubik";
font-weight: 900;
}

button:hover {
box-shadow: 0 0 10px #00F498, 0 0 25px #00BCAA, 0 0 50px #00F498;
transition-delay: 0.6s;
}
button span {
position: absolute;
}
button span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #00F498);
}
button:hover span:nth-child(1) {
left: 100%;
transition: 0.7s;
}
button span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #00F498);
}
button:hover span:nth-child(3) {
right: 100%;
transition: 0.7s;
transition-delay: 0.35s;
}
button span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #00F498);
}
button:hover span:nth-child(2) {
top: 100%;
transition: 0.7s;
transition-delay: 0.17s;
}
button span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #00F498);
}
button:hover span:nth-child(4) {
bottom: 100%;
transition: 0.7s;
transition-delay: 0.52s;
}
button:active {
background: #00F498;
background: linear-gradient(to top right, #00F498, #00BCAA);
color: #fff;
box-shadow: 0 0 8px #00F498, 0 0 8px #00BCAA, 0 0 8px #00F498;
transition: 0.1s;
}
button:active span:nth-child(1) span:nth-child(2) span:nth-child(2) span:nth-child(2) {
transition: none;
transition-delay: none;
}
</style>

<script>
scrollTo = (element) => {
  window.scroll({
    behavior: 'smooth',
    left: 0,
    top: element.offsetTop
  });
  console
}

document.getElementById("comeceagora").addEventListener('click', () => {
  scrollTo(document.getElementById("mercadoaudiovisual"));
});
</script>

注：网站由编辑器创建，无法直接访问HTML，仅能修改<head>标签；此前编辑器团队已在<head>中插入过侧边悬浮横幅的跳转代码（如下），该功能正常：

setTimeout(() => {
    const newLink = document.createElement('a')
    const text = document.createElement('p')
    const arrow = document.createElement('span')
    newLink.appendChild(arrow)
    newLink.appendChild(text)
    arrow.innerHTML = "←"
    text.innerText = "Formulário"
    newLink.onclick = function () {
      window.scroll(0,findPos(document.getElementById("download")));
    }
    newLink.classList.add('bannerSide')
    const bodyTag = document.querySelector('body')
    bodyTag.appendChild(newLink)
  }, 500)

function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return [curtop];
    }
}

window.addEventListener('scroll', e => {
  bannerSide.style.display = window.scrollY > 1000 ? 'flex' : 'none';
});

问题根源 #

1. DOM加载顺序冲突：原脚本在页面未完全加载时就尝试获取按钮元素，但编辑器是动态生成HTML的，此时按钮还未渲染到DOM中，导致事件绑定失败。
2. 函数命名冲突：自定义的scrollTo函数覆盖了浏览器原生的window.scrollTo方法，导致滚动逻辑执行异常。
3. 缺少元素存在性校验：未判断目标区块mercadoaudiovisual是否存在，若ID拼写错误或元素未生成，会直接报错。

修复方案（插入到标签中） #

// 等待页面DOM完全加载完成
window.addEventListener('DOMContentLoaded', function() {
  // 重命名函数，避免覆盖原生方法
  function scrollToTarget(element) {
    // 校验目标元素是否存在
    if (!element) {
      console.error('目标区块不存在，请检查ID拼写是否正确：mercadoaudiovisual');
      return;
    }
    // 执行平滑滚动
    window.scroll({
      behavior: 'smooth',
      left: 0,
      top: element.offsetTop
    });
  }

  // 延迟执行，确保编辑器生成的按钮已加载到DOM中
  setTimeout(function() {
    const targetButton = document.getElementById("comeceagora");
    if (targetButton) {
      // 绑定点击事件
      targetButton.addEventListener('click', function() {
        scrollToTarget(document.getElementById("mercadoaudiovisual"));
      });
    } else {
      console.error('按钮元素不存在，请检查ID拼写是否正确：comeceagora');
    }
  }, 1000); // 可根据编辑器渲染速度调整延迟时间，比如2000表示2秒
});

修复细节解释 #

• DOMContentLoaded事件：确保脚本在页面所有静态DOM元素加载完成后再执行，避免提前获取元素失败。
• 函数重命名：将scrollTo改为scrollToTarget，避免和浏览器原生的window.scrollTo冲突，保证滚动逻辑正常运行。
• 元素存在性校验：添加判断逻辑，若按钮或目标区块不存在，会在控制台输出明确的错误提示，方便排查问题。
• 延迟执行：用setTimeout延迟1秒绑定事件，适配编辑器动态生成HTML的特性，确保按钮已经被渲染到页面中。如果1秒不够，可适当延长延迟时间（比如2000）。

额外检查项 #

• 确认目标区块的IDmercadoaudiovisual拼写完全正确，注意区分大小写。
• 若滚动位置有偏差，可以参考侧边横幅代码中的findPos函数计算准确的元素位置，替换element.offsetTop为findPos(element)[0]。

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