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

En esta ocasión en Tutorial en linea les mostraremos la manera de implementar un un botón de desplazamiento hacia arriba en nuestro sitio Web. scroll top scroll bottom (desplazarse arriba desplazarse abajo).

El siguiente ejemplo muestra cómo crear un botón "desplazarse hacia arriba y desplazarse hacia abajo" que se hace visible cuando el comienza a desplazarse por la página.

Paso 1

Añadimos los jаvascript necesarios para que este funcione:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

Y los estilos necesarios:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

Ademas utilizaremos y agregaremos el Font Awesome necesarios:

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.1/css/all.css">

Añadir CSS: Estilo del botón:

.mouse {
    display: block;
    margin: 0 auto;
    width: 26px;
    height: 48px;
    border-radius: 12px;
    background-color:transparents;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border: 2px solid white;
    position: absolute;
    top: 40px;
    position: absolute;
    left: 51%;
    margin-left: -26px;
}
.mouse__wheel {
    display: block;
    margin: 6px auto;
    width: 3px;
    height: 3px;
    border-radius: 4px;
    background-color:#222;
    border: 1px solid transparent;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: scroll;
    animation-name: scroll;
}
@keyframes scroll {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(14px);
  }
}
#section-1{
    height:50px;
    width:100%;
    background-color:#2196f3;
}
#blank{
    height:1200px;
}
#section-2{
    height:50px;
    width:100%;
    background-color:#ff5722;
}
/* 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;
}

Añadir HTML: Cree un botón que lleve al a la parte superior de la página cuando haga clic en:

<div class="scrollup" href="#"><i class="fa fa-angle-double-up" aria-hidden="true"></i></div>

Añadir jаvascript:

$(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 if
  });
});

//abajo hacia arriba
// fadeIn fadeOut
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});

Mas ejemplo de desplazamiento hacia arriba