En 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 comienza a desplazarse por la página.

Paso 1 d4u4r

Añadir HTML: Cree un botón que lleve al 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 5gb4i

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

Añadir jаvascript:

// Cuando el  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  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 5m5i54

Paso 1 d4u4r

Añadir CSS:

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

Paso 2 5gb4i

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

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

Paso 1 d4u4r

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

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

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