Блог

Главная - Вопросы по программированию - Пытаюсь использовать smooth-scrollbar.js с несколькими якорными ссылками на разные разделы

Пытаюсь использовать smooth-scrollbar.js с несколькими якорными ссылками на разные разделы

#javascript #html #jquery #css

Вопрос:

Я пытаюсь интегрировать smooth-scrollbar.js на наш веб-сайт ClickFunnels, что я уже успешно сделал. Единственная проблема заключается в том, что, когда я хочу использовать несколько привязанных ссылок, таких как разные кнопки, которые ссылаются на разные разделы, весь код, на который я наткнулся, работает только для 1 привязанной ссылки. Я видел, как люди используют querySelectorAll Я просто понятия не имею, как это реализовать.

 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>
Метки: