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

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 Cómo crear un botón de subir arriba - scroll top scroll bottom...
Tutoriales en linea




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






Cómo restablecer Windows 10 o reinstalar automáticamente el sistema operativo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-03
  • Categorias: Microsoft Windows Software Ordenador Noticias Tutorial

Herramientas SEO para posicionamiento de nuestra web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-03
  • Categorias: Diseño Web Schema.org WebSite webmasters Marketing SEO Herramientas Noticias Tutorial

RESEÑA SOBRE GO4REX: BENEFÍCIESE DE INFINITAS OPORTUNIDADES

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-03
  • Categorias: Forex Post Patrocinados Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-26
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Curso de CSS avanzado

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

Curso Revit Online de Cero a Avanzado de Espacio BIM

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-24
  • Categorias: Cursos Noticias Tutorial