jueves, 12 de diciembre de 2013

ScrollTo con jQuery. ¡Aprende como!





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 JQuerysin 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");
});
Fuente:enlace
Publicado por en
Etiquetas: ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Entradas populares