При клике на кнопку нужно проскролить к блоку top-bar
и только после этого запустить остальную часть скрипта.
Как отследить это событие?
$(".js-btn").on("click", function() {
var barPosition = $(".top-bar").offset().top;
window.scrollTo({
top: barPosition,
behavior: "smooth"
});
$(".content").text("Scroll");
});
.header {
height: 100px;
background: #eaeaea;
}
.top-bar {
height: 40px;
background: lightblue;
display: flex;
align-items: center;
padding: 0 20px 0;
}
.content {
height: 500px;
background: lightcoral;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<header class="header"></header>
<div class="top-bar">
<button type="button" class="btn js-btn">Click</button>
</div>
<div class="content"></div>