时间戳

首页 > 解决方案 > 我有一个带有非滚动左侧栏和可滚动右侧容器的页面。我想在容器中添加一个“转到顶部”按钮

javascript - 我有一个带有非滚动左侧栏和可滚动右侧容器的页面。我想在容器中添加一个“转到顶部”按钮

问题描述

我已经编写了代码，以便在页面滚动 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>

标签： javascripthtmlcssdom

解决方案

不需要Javascript

用这个

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

使用页面顶部元素的 ID 作为“href”值，如“nav”

推荐阅读