How to make an up down button?

Question

css

How to make an up-down button like in Habré (so that it returns to the place where the person pressed it) without third-party plugins?

PS
Got to the solution by myself)

HTML CSS

<span id="scroll-to-top"></span>

#scroll-to-top{
  display: none;
  position: fixed;
  width: 50px;
  height: 50px;
  background: url(../img/arrow-up.svg) no-repeat;
  background-size: 50px;
  background-position: center;
  padding: 20px;
  bottom: 50px;
  right: 1%;
  cursor: pointer;
}

jQuery

var scrollButton = $("#scroll-to-top"),
  windowObj = $(window),
  rotate;


  scrollButton.on('click', function(){
    $(this).toggleClass("rotate-scroll-to-top");
    rotate = $(this).hasClass("rotate-scroll-to-top");
    if(rotate){
      window.ScrollPosition = $(window).scrollTop();
      window.scrollTo(0,0);
    } else {
      window.scrollTo(0, window.ScrollPosition);
    }
  });

  windowObj.scroll(function(){
    var windowScroll = windowObj.scrollTop();
    if(windowScroll > 500){
      scrollButton.removeClass("rotate-scroll-to-top");
      rotate = $(this).hasClass("rotate-scroll-to-top");
    }

    if(windowScroll > 500 || rotate){
      scrollButton.css("display", "block");
    } else {
      scrollButton.css("display", "none");
    }
  });

Answer 1

Perhaps this is missing here:

.rotate-scroll-to-top {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

And how to make a smooth scroll in this example?