How to make a scroll button "up"?

Question

css

I read an article about usability, and there was a good tip that you need a "Go To Top" button for scrolling.

On the same page 1ps.ru/blog/ctr/speczializirovannyij-internet-maga... there is an example of this button, which suits me with its minimalism.

Please tell me how can I do the same? Naturally, they will be glad to see ready-made solutions.

Answer 1

webmastermix.ru/raznoe/300-knopka-vverkh-dlya-sait... the first link on request "button for scrolling to the top of the page"

Answer 2

.button{
   opacity: 0;
   position: fixed;
   color: white;
   font-size: 70px;
   visibility: hidden; 
   text-align: center;
   transition: all 0.5s; 
   background: #343434;
   border-radius: 70px;
   display: inline-block;
   right: 50px; bottom: 30px;
   width: 70px; height: 70px;   
}

.visible{
  visibility: visible;
  opacity: 1;
}

(function($scrollButton, $win){

  $(document).scroll(function(){
     $scrollButton.toggleClass("visible", $win.scrollTop() > 300);
  });

  $scrollButton.click(function(e){
       e.preventDefault();
       $("body, html").animate({scrollTop : 0}, 500); 
  });

})( $(".button"), $(window) );

jsfiddle.net/In4in/fLfL6n4j

Answer 3

Thank you. I also liked the version of the button as here: www.seonews.ru/events/riw-2015-eshche-raz-o-plyusa...