У меня есть страница с левой боковой панелью без прокрутки и прокручиваемым правым контейнером. Я хочу добавить в контейнер кнопку «go вверху»

Question

Я написал код, чтобы он отображался после прокрутки страницы на 20 пикселей. Но с этим кодом кнопка не отображается. Проблема в том, что при прокрутке боковой панели и контейнера кнопка работает нормально. Я хочу, чтобы он работал, когда прокручивается только правильный контейнер

//go to top button
var topBtn = document.getElementById('top');
var contain = document.getElementsByClassName('container').scrollTop;

window.onscroll = function(){
    scrollFunction()
};

function scrollFunction(){
    if (document.contain > 20){
        topBtn.style.display = 'block';
    }
    else{
        topBtn.style.display = 'none';
    }
}

function goToTop(){
    document.contain = 0;
    document.documentElement.scrollTop = 0;
}

topBtn.addEventListener('click', goToTop);

    <div class="wrapper">
      <nav role="navigation" id="nav">
        <img class="profile-img" src="images/profile-photo-new.jpg" alt="" />
        <a href="#about" class="nav-links">About</a>
        <a href="#experience" class="nav-links">Experience</a>
        <a href="#education" class="nav-links">Education</a>
        <a href="#skills" class="nav-links">Skills</a>
        <a href="#interests" class="nav-links">Interests</a>
        <a href="#certificates" class="nav-links">Certificates</a>
      </nav>
      <div class="container">
        <div id="about" class="mtb about-fixed-nav">
          <h1 class="heading about-head">
            <span>Pratit</span>
            Bangdiwala
          </h1>
        <a href="#" id="top">Top</a>
      </div>
    </div>
    
    <script src="custom.js"></script>
    
  </body>
</html>

Answer 1

Нет необходимости Javascript

Используйте это

 <a href="#nav" id="top">Top</a>

Используйте идентификатор верхнего элемента вашей страницы как значение «href». Например, «nav»