Cómo crear un botón de subir arriba - scroll top scroll bottom

<!doctype html>
<html lang="es">
<head>

<title>Cómo crear un botón de subir arriba - scroll top scroll bottom</title>

100% {
    opacity: 0;
    transform: translateY(14px);
  }
}
#section-1{
    height:60px;
    width:100%;
    background-color:#2196f3;
}
#blank{
    height:1200px;
}

#section-2{
    height:60px;
    width:100%;
    background-color:#ff0000;
}
/* ABAJO HACIA ARRIBA */
.scrollup{
border-radius: 50%;
font-size: 20px;color: #fff; background-color: #2196F3;
border: 1px solid #A2A2A2;
text-align: center;
padding: 6px;
width: 40px;
height: 40px;
position: fixed;
bottom: 50px;
right:30px;
cursor: pointer;
}
</style>
<script>
$(document).ready(function(){
  // Agregue desplazamiento suave a todos los enlaces
  $(".mouse").on('click', function(event) {

// Asegúrese de que this.hash tenga un valor antes de anular el comportamiento predeterminado
    if (this.hash !== "") {
      // Prevenir el comportamiento predeterminado del clic del ancla
      event.preventDefault();

// Store hash
      var hash = this.hash;

// Usando el método animate () de jQuery para agregar un desplazamiento suave de la página
// El número opcional (800) especifica la cantidad de milisegundos necesarios para desplazarse al área especificada
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Agregue hash (#) a la URL cuando termine de desplazarse (comportamiento de clic predeterminado)
        window.location.hash = hash;
      });
    } // Fin
  });
});

//abajo hacia arriba

// fadeIn fadeOut
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
</script>
</head>
<div class="container">
	<div class="row">
	<a href="#section-2" class="mouse" aria-hidden="true">
    <span class="mouse__wheel"></span>
  </a>
</div>
<br><br><br><br><br>
<div class="row">
<div id="section-1" class="text-center"><br>Cómo crear un botón de subir arriba - scroll top scroll bottom</div>
</div>
<div class="row">
	<div id="blank">
	  <h1 align="center" style="color:black; font-family: Monaco, 'Courier New', monospace; size:12px; text-transform:capitalize; text-decoration: none;">Cómo crear un botón de subir arriba - scroll top scroll bottom</h1>
<br>
<h1 align="center" style="color:black; font-family: Monaco, 'Courier New', monospace; size:12px; text-transform:capitalize; text-decoration: none;">Cómo crear un botón de subir arriba - scroll top scroll bottom</h1><br><h1 align="center" style="color:black; font-family: Monaco, 'Courier New', monospace; size:12px; text-transform:capitalize; text-decoration: none;">Cómo crear un botón de subir arriba - scroll top scroll bottom</h1>
   <h1 align="center" style="color:black; font-family: Monaco, 'Courier New', monospace; size:12px; text-transform:capitalize; text-decoration: none;">Cómo crear un botón de subir arriba - scroll top scroll bottom</h1>
<br>
<h1 align="center" style="color:black; font-family: Monaco, 'Courier New', monospace; size:12px; text-transform:capitalize; text-decoration: none;">Cómo crear un botón de subir arriba - scroll top scroll bottom</h1><br><h1 align="center" style="color:black; font-family: Monaco, 'Courier New', monospace; size:12px; text-transform:capitalize; text-decoration: none;">Cómo crear un botón de subir arriba - scroll top scroll bottom</h1>
</div>
</div>
<div class="row">
<div id="section-2" class="text-center"><br>HACIA ARRIBA EN EL BOTÓN DERECHO</div>
</div>
<br><br><br>
<div class="scrollup" href="#"><i class="fa fa-angle-double-up" aria-hidden="true"></i></div>
<script>
    // scrolltop
$('.scrollup').click(function (){
$("html,body").animate({
scrollTop: 0
}, 1000);
return false;
});
</script>
</div>
</body>
</html>