Hoy es tendencia realizar sitios con el funcionamiento de scroll local. Decidí investigar cómo se puede hacer, y encontré varios plugins de Jquery como lo es ScrollTo.js o LocalScroll.js, pero me pude dar cuenta que estos utilizan jQuery como base principal, entonces surgió mi curiosidad ¿se podrá hacer el efecto de Scroll sólo con JQuery sin usar un plugin aparte? y me dedique a investigar ciertas propiedades de la API y algunos códigos de ejemplos y resulta que sí es factible y posible. Se puede realizar con la función ScrollTop(). Al principio pensé que únicamente servía para enviar hacia el tope de la página pero haciendo pruebas y curioseando un poco logré hacer que se movilizara al sector que yo quisiera y principalmente que identifique si el link apunta hacia una sección de la página o a una página externa. Sin más ni más acá va el tutorial.
Estructura de la página con HTML5:
Código :
<!DOCTYPE> <html lang="es"> <head> <meta charset="utf-8"> <title>Prueba general de scroll To | Scroll Top</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <header> <nav> <ul> <li><a href="#div1">Article 1</a></li> <li><a href="#div2">Article 2</a></li> <li><a href="#div3">Article 3</a></li> <li><a href="#div4">Article 4</a></li> <li><a href="http://mejorando.la" target="_blank">Mejorandola</a></li> </ul> </nav> <a class="to-top">Ir Arriba</a> </header> <section> <article id="home"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </article> <article id="div1"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </article> <article id="div2"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </article> <article id="div3"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </article> <article id="div4"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </article> </section> </body> </html>
La carga de jQuery la hicimos utilizando el CDN de la API de Google (es lo más recomendable).
Código CSS3
Código :
body{
color: #333;
background-color: #BCBCBC;
margin: 0;
padding:0;
font-family: sans-serif;
}
header {
margin: 0;
padding: 0;
width: 100%;
background-color:#FFFFFF;
height: 70px;
position: fixed;
z-index: 5;
}
header nav{
display: inline-block;
margin: 5px;
}
header nav ul{
list-style: none;
}
header nav ul li{
display: inline-block;
margin-left: 15px;
}
header nav ul li a{
color: #0A5DEE;
font-size: 15px;
text-decoration: none;
}
section{
padding-top: 90px;
}
section article:first-child{
margin-top: 10px;
}
section article{
background-color: #fff;
border: 1px solid blue;
border-radius: 10px;
margin: 50px 20px 100px 20px;
padding: 0 10px 0 10px;
}
section article p{
line-height: 2
}
.to-top{
cursor: pointer;
position: absolute;
top: 10px;
right: 650px;
z-index: 999999;
background-color: #AED3FF;
color: #0E3E92;
padding: 0.5em 1.2em;
font-size: 1em;
-webkit-transition:all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition:all 0.2s linear;
transition: all 0.2s linear;
opacity: 0;
}
body.scrolled . to-top{
opacity: 1;
cursor: pointer;
}
Usar JQuery para la realización del Scroll
En el siguiente código vamos a ver cómo hacer el efecto Scroll utilizando sólo JQuery. Lo primero que hacemos es la validación para cada vez que se realice un click en un tag "a". En esta sección validamos si es un link a un enlace interno o a un enlace externo. Para ello utilizamos el valor this.hash que indica si tiene un "#" lo cual indica que es un enlace interno, al ser verdadero esta validación realizamos la animación del "body html" para la sección de la página que estamos laborando.
Código :
$("a").on("click",function(){
if(this.hash){
//console.log($(this).attr('href'));
$("html body").animate({"scrollTop":$($(this).attr('href')).offset().top-82},1400);
return false;
}
});
JavaScript para Scroll hacia el tope de la página
Al momento de hacer scroll, la página mostrará un enlace indicando si desea moverse hacia el tope de la página. Esto se hace con dos funciones: la primera para detectar que ha hecho scroll la página y aparezca el enlace y que cuando llegue al tope desaparezca, y la segunda función genera el efecto de moverse hacia el tope de la web.Detectar el Scroll en la página:
Código :
$(document).ready(function(){
var $win = window;
var $pos = 40;
$(window).scroll(function(){
if($(this).scrollTop() > $pos){
$("a.to-top").css("opacity","1");
$("header").css("box-shadow","2px 5px 20px rgb(14,62,146,0.5)");
}else{
$("a.to-top").css("opacity","0");
$("header").css("box-shadow","1px 2px 1px transparent");
}
})
});
Animación de la página hacia arriba
Código :
$(".to-top").on("click",function(){
$("html, body").animate({scrollTop:0},"slow");
});
Ver ejemplo en funcionamiento
Espero les sirva este material, a mi me sirvió mucho hacer esta función para un sitio que realicé. Se puede emplear la función ScrollLeft() para hacer un efecto de movilizar el panel hacia la izquierda o derecha. Cualquier duda pueden escribirme a mi cuenta de Twitter: @WalterC_87
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por TitanOz el 13 de Noviembre de 2013
Por Kevin vargas el 23 de Noviembre de 2013
Por NoeGomez10 el 05 de Diciembre de 2013
Por jordyjes el 09 de Junio de 2014
Por jordyjes el 09 de Junio de 2014
Por MBB el 16 de Julio de 2014