Smooth scroll

L'integrazione con jQuery permette di aggiungere caratteristiche ed estendere le potenzialità di Bootstrap con semplicità.

In questo esempio creiamo un piccolo plug-in jQuery per animare lo scorrimento della pagina al click sui link del menu principale.

I plug-in in jQuery

Scrivere una funzione come plug-in per jQuery ha il vantaggio di estendere la libreria, integrando la nostra funzione e potendola richiamare assieme a tutte le altre funzioni jQuery di cui si ha bisogno sempre con lo stesso metodo.

Per scrivere una funzione che faccia da plug-in occorre rispettare una determinata sintassi.

Un plug-in inizia tendenzialmente così:

(function ( $ ) {
  $.fn.something = function (one_or_more_values){
		...	

e termina sempre così:

...
}( jQuery ));

Lo Scroller

Siccome stiamo costruendo una funzione per lo scrolling chiameremo il nostro plug-in scroller, e passeremo alla funzione un valore (che chiameremo selector) che rappresenta la classe o id della lista di ancore interne alla pagina.

(function ( $ ) {
  $.fn.scroller = function (selector){

Quindi, per evitare coflitti andremo a rendere più stretta la regola che definisce il selector.

  var selector="ul"+selector+" li a[href^='#']";

Quindi definiremo il comportamento della pagina usando sia funzioni native di javascript sia le funzioni di jQuery.

  //aziona il comportamento dello script al click di un elemento identificato come selector
  $(selector).on('click', function(e) {
   // previene il comportamento di default dei link
   e.preventDefault();

Usiamo la funzione hash javascript per salvare in una variabile l'ancora del selettore

cfr. http://www.w3schools.com/jsref/prop_loc_hash.asp

   
   var hash = this.hash;

Recuperiamo le coordinate dell'oggetto con la funzione jQuery offset().top

cfr. http://api.jquery.com/offset/

   
  var target = $(hash).offset().top;

Animiamo la pagina facendola scorrere verso l'alto per i pixel definiti dal target.

cfr. http://api.jquery.com/animate/

cfr. http://www.w3schools.com/jquery/jquery_animate.asp

  // animate
  $('html, body').animate({
    scrollTop: target
    }, 
    1000, 
    function(){
      window.location.hash = hash;
      });
   });

Il risultato

Alla fine il nostro script apparirà così:

(function ( $ ) {
	$.fn.scroller = function (selector){		
		var selector="ul"+selector+" li a[href^='#']";		
		$(selector).on('click', function(e) {
			e.preventDefault();
			console.log(selector);
			var hash = this.hash;
			var target = $(hash).offset().top;
			$('html, body').animate(
				{
				scrollTop: target
				}, 
				1000, 
				function(){window.location.hash = hash;}
			);
		});
	};
}( jQuery ));
	

Il funzionamento

A questo punto per permettere allo scroller di funzionare dobbiamo:

• aggiungere una classe funzionale alla lista di link presenti nella navbar, che chiameremo .myscroller

  
  <nav ...
  	<ul class="nav navbar-nav myscroller">
  	...
  

• lanciare il trigger per jQuery, così:

   $().scroller(".myscroller");

• qualche piccolo correttivo del CSS ci aiuterà a evitare che i titoli delle sezioni finscano sotto la barra di navigazione quando la pagina scorre, ad es.:

.container{ 
	padding-top:50px;
	min-height:500px
	}