I am experiencing an issue with on-page links on my page. There are three links that should smoothly scroll to the anchor link, but only the first one does so. The other two links, which are positioned above the anchored link, first scroll to the top of the page before jumping to the anchor. How can I make all links scroll smoothly without going to the top first?
Below is the code snippet I currently have:
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" />
</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>Here's a fiddle: http://jsfiddle.net/Codewalker/6or8pwjx/