ancoraggio sito orizzontale

[nerena88]

Ciaooooo!

volevo farmi il sito personale, utilizzando il tutorial che ho trovato nel sito

http://www.html.it/articoli/un-portf...l5-e-jquery-1/

il sito però è formato da più pagine, invece io volevo avere una sola pagina con più sezioni, per farlo utilizzo delle ancore che mi portino alle sezioni, ma mi portano direttamente la, mentre io per questioni di grafica di sfondo volevo che scorresse più lentamente!

nel sito fornito, c'è effettivamente l'effetto che voglio ma non so modificare la regola correttamente java

la regola è questa

// BACK BUTTON
$('#back').click( function() {
var parentEl = $('html,body');
if ($.browser.opera){
parentEl = $('html');
}
parentEl.stop().animate({scrollLeft: '0', scrollTop: '0' }, 1000);
return false;
});
});

questa regola è relativa ad un solo pulsante

credo che invece di "$('#back')" dovrebbe essere una cosa come questa "$('#')"

ma non funziona, sapete percaso come si scrive?

Grazie

[cavicchiandrea]

Non so se ti riferisci a thehorizontalway.com che non fa uso di jquery pertanto non capisco dove hai preso quel codice.
In rete dovrebbero esserci script jquery che fanno quello che chiedi, se fossi in te procederei in tal senso (senza offesa) non mi sembra da quanto leggo tu possa riuscirci avendo (è una sensazione) poca conoscenza di jquery, se non è cosi scusa l'intrusione

[nerena88]

hahahaha, no no hai ragione tu, non so proprio nulla di javaquery, di solito modifico solo parametri

il codice l'ho preso da "voi" inteso html.it, nella terza pagina del sito indicato sopra c'è la versione per il download

quell'effetto è legato solo all'ancora del tasto per tornare indietro, mentre io lo vorrei per tutte le ancore

ho provato a prendere un'altro javaquery, ma il mio problema è basilare, se io creo una classe che comprende tutte le ancore, come faccio a dire alla regola in jquery che mi prenda quella classe?

$('.nomeregola') .click( function() {
var parentEl = $('html,body');
if ($.browser.opera){
parentEl = $('html');
}
parentEl.stop().animate({scrollLeft: '0', scrollTop: '0' }, 1000);
return false;
});
});

[lucavizzi]

Prova questo:

<script type="text/javascript">
$(function(){
	$('.menu').click(function(){
		var parentEl = $('html,body');
		if ($.browser.opera){
			parentEl = $('html');
		}
 		var target=$(this).attr('href');
		var targetScrollTop=Math.round($(target).offset().top);
		parentEl.animate({scrollTop: targetScrollTop},1000);
		return false;
	});
});
</script>

[cavicchiandrea]

@Luca vuole fare lo scroll orizzontale non verticale e se ho capito bene su un altro elemento non quello associato al click

[lucavizzi]

Originariamente inviato da cavicchiandrea
@Luca vuole fare lo scroll orizzontale non verticale e se ho capito bene un altro elemento non quello associato al click

Giusto, quindi diventa:

<script type="text/javascript">
$(function(){
	$('.menu').click(function(){
		var parentEl = $('html,body');
		if ($.browser.opera){
			parentEl = $('html');
		}
 		var target=$(this).attr('href').replace('#','');
		var targetScrollTop=Math.round($('#'+target).offset().top);
		var targetScrollLeft=Math.round($('#'+target).offset().left);
		parentEl.animate({scrollTop: targetScrollTop,scrollLeft: targetScrollLeft},1000);
		return false;
	});
});
</script>

[lucavizzi]

@Andrea: vuole associarlo al menu di navigazione principale, mi pare.

[nerena88]

Grazie per la risposta!

con il codice che mi hai scritto, dovrei dare la classe menu alle mie ancore giusto?
nel caso non mi funziona

[lucavizzi]

Originariamente inviato da nerena88
Grazie per la risposta!

con il codice che mi hai scritto, dovrei dare la classe menu alle mie ancore giusto?
nel caso non mi funziona

Esatto:

Contatti

poi la sezione contatti sarà:

<elemento id="contatti">

</elemento>

[nerena88]

prima di tutto vorrei ringraziarti per la pazienza ma... non cambia nulla, nel senso che con o senza java la pagina mi si sposta con l'ancora, ma aggiungendo il java che mi hai dato non riesco a rallentare (anche cambiando i parametri) il movimento

l'immagine rappresenta parte della mia pagina, poi ho messo il richiamo all'immagine che mi interessa

<figure>
<a name="blog" >
[img]images/assos.jpg[/img]
<figcaption>Assos, Cefalonia, Grecia. Originale di F. Buratti</figcaption>
</a>
</figure>

T_T