I'm trying to integrate smooth-scrollbar.js into our ClickFunnels website which I've already successfully done. The only problem is that when I want to use multiple anchor links like different buttons that link to different sections, all the code I've stumbled upon only works for 1 anchor link. I've seen people use querySelectorAll I Just have no idea how to implement this.
gsap.registerPlugin(ScrollTrigger);
let bodyScrollBar = Scrollbar.init(document.querySelector('body'), {
damping: 0.08,
continuousScrolling: 1,
});
ScrollTrigger.scrollerProxy(".body", {
scrollTop(value) {
if (arguments.length) {
bodyScrollBar.scrollTop = value;
}
return bodyScrollBar.scrollTop;
},
});
bodyScrollBar.addListener(ScrollTrigger.update);
const slider = document.querySelector('#main-2');
var scrollToHere = slider.offsetTop;
$('.link1').on('click', function() {
bodyScrollBar.scrollTo(0, scrollToHere, 1000);
});
var scrollToHere = slider.offsetTop;
$('.btn1').on('click', function() {
bodyScrollBar.scrollTo(0, scrollToHere, 1000);
});body {
width: 100%;
height: 100vh;
margin: 0;
font-size: 2em;
}
section {
padding: 2em;
}
.main {
height: 100vh;
width: 100%;
background-color: white;
}
.main__2 {
height: 100vh;
width: 100%;
background-color: wheat;
}
.main__3 {
height: 100vh;
width: 100%;
background-color: red;
}
.navbar {
font-size: 3vw;
z-index: 999;
}
a {
color: blue;
text-decoration: none;
margin-left: 50px;
}
.btn1 {
background-color: #4CAF50;
border: none;
color: white;
padding: 2em;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}<body>
<section>
<header class="navbar">
<a href="#" class="link1">LINK 1</a>
</header>
<a href="#" class="btn1">Button 1</a>
<section>
<h1> What's up!
</>
<p>Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a leo vitae sapien sodales placerat at sit amet nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ut justo rhoncus, sollicitudin ipsum sit amet, laoreet
est. Fusce erat nibh, finibus in dolor id, semper porta nisl.</p>
</section>
<section>
<h1> What's up!
</>
<p>Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a leo vitae sapien sodales placerat at sit amet nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ut justo rhoncus, sollicitudin ipsum sit amet, laoreet
est. Fusce erat nibh, finibus in dolor id, semper porta nisl.</p>
</section>
<section>
<h1> What's up!
</>
<p>Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a leo vitae sapien sodales placerat at sit amet nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ut justo rhoncus, sollicitudin ipsum sit amet, laoreet
est. Fusce erat nibh, finibus in dolor id, semper porta nisl.</p>
</section>
<div class="smooth-scroll">
<div class="main"></div>
<div class="main__2" id="main-2"></div>
<div class="smooth-scroll">
<div class="main"></div>
<div class="main__3" id="main-3"></div>
</div>
<footer>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.5.1/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.5.1/dist/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.3/smooth-scrollbar.min.js"></script>
</footer>
</body>