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

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

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

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

Paso 1 5rh6i

Añadir CSS:

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

Paso 2 50x6k

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

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

Paso 1 5rh6i

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

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

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