scrollIntoView失效问题：点击后页面滚动随即刷新

问题根源 #

你使用的是<a>标签，它的默认行为是触发页面跳转。当href=""时，浏览器会将其解析为刷新当前页面，所以滚动到目标元素后立刻触发了刷新。

可行解决方案 #

方案1：阻止<a>标签的默认跳转行为 #

在onClick事件里添加阻止默认行为的逻辑，两种写法都可以：

<!-- 写法1：通过return false阻止 -->
<a href="" class="hero-btn" onClick="document.getElementById('middle').scrollIntoView(); return false;">Get Started</a>
<div id="middle"></div>

<!-- 写法2：通过事件对象阻止 -->
<a href="" class="hero-btn" onClick="event.preventDefault(); document.getElementById('middle').scrollIntoView();">Get Started</a>
<div id="middle"></div>

方案2：替换为<button>标签（更语义化） #

既然是按钮功能，用<button>更合适，它没有默认跳转行为：

<button class="hero-btn" onClick="document.getElementById('middle').scrollIntoView();">Get Started</button>
<div id="middle"></div>

如果需要保持原样式，给CSS补充以下代码去掉按钮默认样式：

.hero-btn{
    /* 原有样式不变 */
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 16px;
    background: transparent;
    position: relative;
    cursor: pointer;
    /* 新增：清除button默认样式 */
    border-radius: 0;
    outline: none;
    font-family: inherit;
}

方案3：利用原生锚点跳转（无需JS） #

直接把href设置为目标元素的ID，浏览器原生支持滚动，还能自动保留平滑滚动的可能性：

<a href="#middle" class="hero-btn">Get Started</a>
<div id="middle"></div>

如果需要平滑滚动效果，给全局CSS添加：

html {
    scroll-behavior: smooth;
}

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