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></di>
<!------ 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 >>


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




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






Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Cómo eliminar a todos los usuarios de Twitter que estás siguiendo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google Chrome Redes Sociales Twitter Noticias Tutorial

Cómo escribir un poema

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial