Inicia sesión



Cómo crear un botón de subir arriba - scroll top scroll bottomEn 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 usuario 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 usuario 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();
}
});
Inténtalo tú mismo >>
Mas ejemplo de desplazamiento hacia arriba

Te sugiero seguir leyendo...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-31
  • Categorias: Diseño Web Bootstrap @font-face CSS3 html5 javascript WebSite webmasters Noticias Tutorial

Cómo crear un botón de subir arriba - scroll top scroll bottom Cómo crear un botón de subir arriba - scroll top scroll bottom...
Tutoriales en linea
¿Te gusta el tutorial?




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!