Inicia sesión




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 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




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






Como posicionar mi página web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-24
  • Categorias: WebSite Marketing SEO Noticias Tutorial

¿Cómo usar una impresora láser A3?

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-24
  • Categorias: hardware Noticias Tutorial

Como hacer algoritmo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-24
  • Categorias: Lenguajes De Programacion Algoritmos Software Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial