Este tutorial es la continuación del tutorial «Mantener fijo el header al hacer Scroll«, en la veíamos como mantener el menú de una página web fijo en el top de la pantalla al hacer scroll vertical.
Pues bien, a continuación añadiremos un efecto de scroll suave, también con Jquery, a lo anteriormente hecho. Con unas pocas líneas conseguiremos un efecto llamativo para nuestra página web.
Demostración: DEMO.
Lo primero que tenemos que hacer es poner la class «smooth» a nuestros enlaces del menú. El HTML quedaría así:
<body>
<div id="header">
<div id="headercont">
<a href="https://unaicalleja.es" target="_blank"><img src="diseno-web-bilbao.jpg" alt="diseño web en bilbao" /></a><h1>TUTORIAL:<BR/> MANTENER MENÚ AL HACER SCROLL + SCROLL SUAVE</h1>
</div>
</div>
<div id="menu">
<a href="#ancla1" class="smooth">Ir al ancla1</a>
<a href="#ancla2" class="smooth">Ir al ancla2</a>
<a href="#ancla3" class="smooth">Ir al ancla3</a>
</div>
<div class="contenedor">
<div id="ancla1">Contenido 1</div>
<div id="ancla2">Contenido 2</div>
<div id="ancla3">Contenido 3</div>
</div>
</body>
A continuación las css:
img{border:0}
body{margin:0; padding:0}
h1{color: #FFFFFF;float: right;font-size: 1.3em;margin-top: 120px;}
#header{width:100%; height:250px; background:black; }
#headercont{width:900px; margin:auto;height:250px}
#headercont img{margin-top:20px; float:left}
#menu{width:100%; height:50px; background:#2b2b2b; padding-top:20px; text-align:center; min-width:900px}
#menu a{font-family:arial; color:white; text-decoration:none;margin-left:30px; margin-right:30px}
.contenedor{width:900px; margin:auto}
#ancla1{height:900px; border:1px solid grey; padding:20px}
#ancla2{height:500px; border:1px solid red; padding:20px}
#ancla3{height:1700px; border:1px solid green; padding:20px}
.fixed{position:fixed;top:0}
.margen{margin-top:50px}
Ahora el pequeño código Jquery:
<script>
/* Smooth scrolling para anclas*/
$('a.smooth').live('click', function(e) {
e.preventDefault();
var link = $(this);
var anchor = link.attr('href');
$('html, body').stop().animate({
scrollTop: $(anchor).offset().top - ($('#menu').height()+21)
}, 1500, 'easeOutBack');
});
</script>
Os explico brevemente cómo funciona:
Si dejais solamente el «scrollTop: $(anchor).offset().top», nos pone el enlace de destino en el top de la pantalla. En este caso no queremos eso ya que tenemos anclado el menú en la parte superior del navegador.
Esto se consigue con «- ($(‘#menu’).height()» lo que hace este código es «restar» al movimiento el tamaño del menú.
En nuestro caso tenemos que darle unos pixeles más ya que hemos dado un padding al menú, por lo que no cuadra. Esto se consigue con «+21».
Por último, si quereis un efecto más llamativo, tenemos que cargar los efectos jquery easing «» en el head (podeis descargaroslo también en vez de poner el link directo) para que posteriormente, poniendo «‘easeOutBack'» (por ejemplo) detras del tiempo que tarda en ejecutarse (1000), haga el efecto deseado.
Para testear los diferentes efectos easing: Clic aquí.
