无法从所有链接进行平滑滚动

Question

我有一个带有三个页面链接的页面，它们都应该平滑地滚动到锚点链接，但只有第一个链接可以平滑地滚动。顺便说一句，第一个链接是“高于”锚定链接的唯一链接。忽略平滑滚动脚本的其他两个链接位于链接上方，并首先滚动到页面顶部，然后捕捉到锚定链接。我如何配置它，使锚定链接下面的链接平滑地向上滚动到锚定链接，而不是先滚动到顶部？

这就是我所拥有的：

​

const links = document.querySelectorAll(".cta-btn a");

for (const link of links) {
  link.addEventListener("click", clickHandler);
}

function clickHandler(e) {
  e.preventDefault();
  const href = this.getAttribute("href");
  const offsetTop = document.querySelector(href).offsetTop;
  $("input[id$='input']").focus();
  $(".guitar-service-address>span.placeholder-location").hide();
  scroll({
    top: offsetTop,
    behavior: "smooth"
  });
}

$('#input').on("focus", function() {
  $(".guitar-service-address>span.placeholder-location").hide();
});

$(function() {
  $("span.placeholder-location + input").keyup(function() {
    if ($(this).val().length) {
      $(this).prev('span.placeholder-location').hide();
    } else {
      $(this).prev('span.placeholder-location').show();
    }
  });
  $("span.placeholder-location").click(function() {
    $(this).next().focus();
  });
});

if ($(window).width() < 768) {
  $(".placeholder-above").append($(".placeholder-float").text());
}

.container {
  max-width: 990px;
}

.tab-placeholder {
  display: none;
}

input[id="input"] {
  width: 500px;
}

.guitar-service-address>span.placeholder-location {
  position: absolute;
  margin: 6px 8px;
  color: #686e74;
  cursor: auto;
  font: Helvetica 15px/20px bold;
  font-weight: bold;
  z-index: 1;
}

.guitar-service-address>.placeholder-location>.font-alt {
  color: #686e74;
  font-weight: normal;
}

input {
  padding: 5px;
  font-size: 11pt;
  color: black;
  border: 1px solid #979797;
  border-bottom: 4px solid #000;
}

.help-block {
  font-size: 90%;
}

.test {
  padding: 20px;
}

.section {
  padding: 150px 20px;
}

#head {
  background-color: #ddd;
  padding: 10px 20px;
}

#ckav {
  background-color: #d4d4d4;
}

#cta {
  background-color: #fdfd4d;
}

@media (max-width: 768px) {
  input[id="input"] {
    width: 300px;
  }
  span>.placeholder-float {
    display: none;
  }
  .tab-placeholder {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section" id="head">
  <div class="container">
    <h2>CTA</h2>
    <div>
      Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
      innovation via workplace diversity and empowerment.
    </div>
    <div class="cta-btn">
      <a href="#ckav">Check your guitar</a>
    </div>
  </div>
</section>

<section class="section" id="ckav">
  <div class="container test">
    <div class="row">
      <div class="col-sm-12">
        <div class="placeholder-above"></div>
        <div class="guitar-service-address">
          <span class="placeholder-location"><span class="placeholder-float">Find guitar repair specialist. </span><span class="font-alt">Enter your guitar make and model...</span></span>
          <input id="input" type="text" />&nbsp;
        </div>
        <p class="help-block">What is this?</p>

      </div>
    </div>
  </div>
</section>

<section class="section" id="stuff">
  <div class="container">
    <h2>Stuff</h2>
    <div>
      Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. Efficiently unleash cross-media
      information without cross-media value.
    </div>
    <div class="cta-btn">
      <a href="#ckav">Check your guitar</a>
    </div>
  </div>
</section>

<section class="section" id="cta">
  <div class="container">
    <h2>CTA</h2>
    <div>
      Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
      innovation via workplace diversity and empowerment.
    </div>
    <div class="cta-btn">
      <a href="#ckav">Check your guitar</a>
    </div>
  </div>
</section>

​

这里有一个小把戏：http://jsfiddle.net/Codewalker/6or8pwjx/

Answer 1

只需将此添加到CSS即可。你甚至不需要Javascript/Jquery。

* {
  scroll-behavior: smooth;
}

Check it in action on Jsfiddle