Inicia sesión




Cómo crear un botón de desplazamiento hacia arriba

Cómo crear un botón de desplazamiento hacia arribaEn 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.

Los siguientes ejemplos muestra cómo crear un botón "desplazarse hacia arriba" que se hace visible cuando el usuario comienza a desplazarse por la página.

Paso 1


Añadir HTML: Cree un botón que lleve al usuario a la parte superior de la página cuando haga clic en:
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

Paso 2


Añadir CSS: Estilo del botón:
#myBtn {
  display: none; /* Oculto por defecto */
  position: fixed; /* Posición fija / pegajosa*/
  bottom: 20px; /* Coloque el botón en la parte inferior de la página. */
  right: 30px; /* Coloca el botón 30px de la derecha. */
  z-index: 99; /* Asegúrese de que no se superponga */
  border: none; /* Quitar bordes */
  outline: none; /* Quitar contorno*/
  background-color: black; /* Establecer un color de fondo */
  color: white; /* Color de texto */
  cursor: pointer; /* Añadir un puntero del ratón en el hover */
  padding: 15px; /* Algo de relleno */
  border-radius: 10px; /* Esquinas redondeadas */
  font-size: 18px; /* Aumenta el tamaño de la fuente */
}

#myBtn:hover {
  background-color: #555; /* Añadir un fondo gris oscuro en el hover */
}

Paso 3


Añadir jаvascript:
// Cuando el usuario se desplaza hacia abajo 20 px desde la parte superior del documento, muestra el botón
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // Para safari
  document.documentElement.scrollTop = 0; // Para Chrome, Firefox, IE y Opera
}
Inténtalo tú mismo >>

Cómo crear un botón de desplazamiento hacia arriba ejemplo 2

Paso 1

Añadir CSS:
#toTop{
    position: fixed;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    display: none;
}

Paso 2


Añadir HTML:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Incluya lo anterior en su etiqueta HEAD ---------->

Paso 3

Añadir jаvascript:
$(document).ready(function(){
      $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span> Ir arriba</div>');
        $(window).scroll(function () {
            if ($(this).scrollTop() != 0) {
                $('#toTop').fadeIn();
            } else {
                $('#toTop').fadeOut();
            }
        }); 
    $('#toTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
Inténtalo tú mismo >>

Cómo crear un botón de desplazamiento hacia arriba ejemplo 3

Paso 1

Añadir CSS:
/*Volver arriba */
#back_to_top{float:right;margin:-9px 0 0;width:52px;height:52px;line-height:42px;right:20px;;font-size:20px;text-align:center;position: fixed;cursor: pointer;opacity: .50;z-index: 100;bottom:10px;visibility: visible;display: none;}

Paso 2

Añadir HTML:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Incluya lo anterior en su etiqueta HEAD ---------->

<div id="back_to_top" class="btn btn-info"><a href="#"><i class="glyphicon glyphicon-chevron-up" style="color: #ffffff;"></i></a></div><!------ Incluya lo anterior en su etiqueta Footer ---------->

Paso 3

Añadir jаvascript:
jQuery(document).ready(function(){
    jQuery("#back_to_top").hide();
    jQuery(function () {
        jQuery(window).scroll(function () {
        if (jQuery(window).scrollTop() > 400) {
                jQuery('#back_to_top').fadeIn();
        } else {
                jQuery('#back_to_top').fadeOut();
        }
    });
    // scroll body to 0px on click
    jQuery('#back-top a').click(function () {
        jQuery('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
 });
Inténtalo tú mismo >>

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-07-06
  • Categorias: Diseño Web CSS3 Html javascript WebSite webmasters Noticias Tutorial

Cómo crear un botón de desplazamiento hacia arriba
Cómo crear un botón de desplazamiento hacia arriba Cómo crear un botón de desplazamiento hacia arriba...
Tutoriales en linea




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






Go4Rex El Salvador es la mejor opción para una experiencia comercial perfecta

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-08
  • Categorias: criptomoneda Forex Noticias Tutorial

Que es marketing de eventos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-07
  • Categorias: Post Patrocinados Coobis Marketing Noticias Tutorial

Cómo analizar el rendimiento del sitio web con Lighthouse

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-05
  • Categorias: Diseño Web WebSite webmasters Optimizacion 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