JavaScript/jQuery - scroll up button

Question

I'm new to web development and came across a lot of tutorials on jQuery but there wasn't a lot on pure JS. I'm trying to convert this piece of code I found online which scrolls the page up when user clicks a button in the bottom right into pure JavaScript but I'm having some trouble.

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;
    })
}

This is what I have so far but it doesn't work:

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>

This is for web development assignment, can I have some advice?

oddCat · Accepted Answer · 2017-03-11 16:53:46Z

1

The problem is that document.getElementsByClassName('back-to-top') returns an array-like object. Check documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Solution:

    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);
    }

See working example here: https://jsfiddle.net/9m7doq1m/

To avoid this issue, you can use the id selector (getElementById) instead of the class selector.

edited Mar 11, 2017 at 16:53

answered Mar 11, 2017 at 16:44

oddCat

1063 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A.C Over a year ago

Is there a way of adding animation effect to make the transition smooth like in: $('.back-to-top').click(function(){ $('body').animate({ scrollTop: 0 }, 1000)

oddCat Over a year ago

I have a solution for the animation effect here: jsfiddle.net/9m7doq1m/2. If you find my answer helpful, please accept the answer. An up vote would be greatly appreciated as well ;)

Anonymous · Accepted Answer · 2017-03-11 16:33:31Z

0

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>

answered Mar 11, 2017 at 16:33

Anonymous

1,9882 gold badges19 silver badges28 bronze badges

Collectives™ on Stack Overflow

JavaScript/jQuery - scroll up button

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related