JavaScript/jQuery - 向上滚动按钮

Question

我是 Web 开发新手，看过很多关于 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>

这是一项网络开发作业，我能给我一些建议吗？

Answer 1

问题是 document.getElementsByClassName('back-to-top') 返回一个类似数组的对象。在此处查看文档:https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

解决方案:

    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://jsfiddle.net/9m7doq1m/

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