我有一个页面，它有一个不可滚动的左侧边栏和一个可滚动的右侧容器。我想在容器中添加一个 "转到顶部 "按钮。

Question

我已经写好了代码，让它在页面滚动20px后显示出来。但使用这段代码后，按钮就不显示了。这里的问题是，当侧边栏和容器都滚动时，按钮可以正常工作。我想让它在只有右边的容器滚动的时候工作。

//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>

使用页面顶部元素的Id作为 "href "valueLike "nav"