scroll jquery

[misshellfire]

Buongiorno,
guardate a questo indirizzo
http://tympanus.net/codrops/2010/06/...comment-245538

...avrei bisogno di unire la funzionalità orizzontale con quella verticale... cioè potermi muovere nel sito in entrambe le direzioni......... ci sto litigando perchè non capisco esattamente cosa io debba modificare nel codice jquery.......

presumo di dover trovare una via di mezzo tra queste due funzioni:

- verticale

$(function() {
	$('ul.nav a').bind('click',function(event){
		var $anchor = $(this);
 
		$('html, body').stop().animate({
			scrollTop: $($anchor.attr('href')).offset().top
		}, 1500,'easeInOutExpo');
		/*
		if you don't want to use the easing effects:
		$('html, body').stop().animate({
			scrollTop: $($anchor.attr('href')).offset().top
		}, 1000);
		*/
		event.preventDefault();
	});
});

- orizzontale

$(function() {
	$('ul.nav a').bind('click',function(event){
		var $anchor = $(this);
		/*
		if you want to use one of the easing effects:
		$('html, body').stop().animate({
			scrollLeft: $($anchor.attr('href')).offset().left
		}, 1500,'easeInOutExpo');
		 */
		$('html, body').stop().animate({
			scrollLeft: $($anchor.attr('href')).offset().left
		}, 1000);
		event.preventDefault();
	});
});

grazie!

[Vindav]

...avrei bisogno di unire la funzionalità orizzontale con quella verticale... cioè potermi muovere nel sito in entrambe le direzioni.........

Cosa intendi con unire? vuoi che alcune ancore utilizzino lo scroll verticale ad altre lo scroll orizzontale nella medesima pagina?

[misshellfire]

esattamente....

[Vindav]

dovrebbe bastare modificare i selettori su cui applichi le funzioni di scroll...

[lucavizzi]

$(function() {
	$('ul.nav a.vertical ').bind('click',function(event){
		var $anchor = $(this);
 
		$('html, body').stop().animate({
			scrollTop: $($anchor.attr('href')).offset().top
		}, 1500,'easeInOutExpo');
		/*
		if you don't want to use the easing effects:
		$('html, body').stop().animate({
			scrollTop: $($anchor.attr('href')).offset().top
		}, 1000);
		*/
		event.preventDefault();
	});
	$('ul.nav a.horizontal ').bind('click',function(event){
		var $anchor = $(this);
		/*
		if you want to use one of the easing effects:
		$('html, body').stop().animate({
			scrollLeft: $($anchor.attr('href')).offset().left
		}, 1500,'easeInOutExpo');
		 */
		$('html, body').stop().animate({
			scrollLeft: $($anchor.attr('href')).offset().left
		}, 1000);
		event.preventDefault();
	});
});

Assegna ai link che devono scrollare orizzontalmente la classe "horizontal" e a quelli che devono scrollare verticalmente la classe "vertical".

Luca

[misshellfire]

Grazie mille Luca! funziona perfettamente...

[misshellfire]

...ultima cosa... come faccio a far partire il sito dalla sezione 2 piuttosto che dalla 1?

[lucavizzi]

$(function() {
	$('ul.nav a.vertical ').bind('click',function(event){
		var $anchor = $(this);
 
		$('html, body').stop().animate({
			scrollTop: $($anchor.attr('href')).offset().top
		}, 1500,'easeInOutExpo');
		/*
		if you don't want to use the easing effects:
		$('html, body').stop().animate({
			scrollTop: $($anchor.attr('href')).offset().top
		}, 1000);
		*/
		event.preventDefault();
	});
	$('ul.nav a.horizontal ').bind('click',function(event){
		var $anchor = $(this);
		/*
		if you want to use one of the easing effects:
		$('html, body').stop().animate({
			scrollLeft: $($anchor.attr('href')).offset().left
		}, 1500,'easeInOutExpo');
		 */
		$('html, body').stop().animate({
			scrollLeft: $($anchor.attr('href')).offset().left
		}, 1000);
		event.preventDefault();
	});
              $('#begin').trigger('click'); 
});

Assegna al link della sezione due l'id "begin" (id="begin").

In questa maniera però vedrai il movimento dalla sezione 1 alla sezione 2.
Per non vedere il movimento dovresti modificare il foglio di stile affinchè mostri dall'inizio la sezione 2.

Luca

[Vindav]

$("ul.nav a[href=#sezione2]").trigger("click");

[misshellfire]

Originariamente inviato da Vindav
$("ul.nav a[href=#sezione2]").trigger("click");

con questo codice funziona... parte dalla sezione 1 alla 2....