Question

我是网络开发的新手，并且遇到过很多关于jQuery的教程，但纯粹的JS并没有太多。我试图转换我在网上找到的这段代码，当用户点击右下角的按钮进入纯JavaScript时，它会向上滚动页面，但我遇到了麻烦。

function main() {
    $('.back-to-top').hide();
    $(window).scroll(function(){
        if($(window).scrollTop()>400){
            $('.back-to-top').fadeIn('fast');
        }else{
            $('.back-to-top').fadeOut('fast');
        }
    })

    $('.back-to-top').click(function(){
        $('body').animate({
            scrollTop: 0
        }, 1000)

        return false;
    })
}

这是我到目前为止所做的，但它不起作用：

var scrollUp = document.getElementsByClassName('back-to-top');

window.onscroll = function(){
    if(window.pageYOffset >= 400){
        scrollUp.style.display = 'block';
    }else{
        scrollUp.style.display = 'none';
    }
}

scrollUp.onclick = function(){
    window.scrollTo(0,0);
}

HTML

<a class="back-to-top" id="back-to-top" href="#">
    <i class="fa fa-arrow-up" aria-hidden="true"></i>
    <h2 class="text">Scroll Up</h2>
</a>

这是针对Web开发任务的，我可以提供一些建议吗？

Answer 1

问题是document.getElementsByClassName（＆＃39; back-to-top＆＃39;）返回一个类似数组的对象。在此处查看文档：{{3}}

解决方案：

    var scrollUp = document.getElementsByClassName('back-to-top')[0];

    window.onscroll = function(){
      if(window.pageYOffset >= 400){
        scrollUp.style.display = 'block';
      }else{
        scrollUp.style.display = 'none';
      }
    }

    scrollUp.onclick = function(){
      window.scrollTo(0,0);
    }

请参阅此处的工作示例： https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

要避免此问题，您可以使用id选择器（getElementById）而不是类选择器。

Answer 2

var scrollUp = document.getElementsByClassName('back-to-top');
scrollUp.onclick = function(){
    window.scrollTo(0,0);
}

#content {
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" style="height:1000px">

</div>

<a class="back-to-top" id="back-to-top" href="#">
  <i class="fa fa-arrow-up" aria-hidden="true"></i>
  <h2 class="text">Scroll Up</h2>
</a>

JavaScript / jQuery - 向上滚动按钮

2 个答案: