[JQUERY] velocita' .scrolltop cambia a seconda dell'altezza in cui si attiva

[termopili]

Ciao a tutti!
Questa volta credo di avere un problemino non semplice da risolvere: ho due pulsanti (up e down) i quali, con mouseover, mi fanno scrollare la pagina in su o in giu', evento utile dal momento che questo sito sara' moooolto lungo.
Lo scriptino l'ho creato (adesso ce l'ho sull'altro PC per cui non posso copiarlo, ma se vi occorre potro' metterlo succesivamente) e funziona bene. Ho anche impostato la velocita' desiderata e il tipo di ease.
Pero' c'e' il problema: se mi trovo a (per esempio) 200 dall'inizio pagina e mi posiziono sul pulsante up, lo scroll risulta avere una velocita' piu' lenta di quella che ottengo andando sul pulsante down. Viceversa, se vado manualmente in fondo alla pagina, risultera' che il down sara' lento e l'up veloce. Se parto dal centro le velocita' sono come le ho settate io e uguali tra di loro.
Dico subito che il problema non dipende dall'ease (magari qualcuno potrebbe pensarlo...), togliendolo o modificandolo il problema sussiste.

Che mi dite???

Grazie in anticipo, ciao

[cavicchiandrea]

Probabilmente è perché la velocità non è fissa ma calcolata in base alla distanza che hai da scrollare

[termopili]

Grazie Andrea.
Questa era la conclusione a cui ero arrivato anche io...ma non credi ci sia una soluzione per far si di eliminare questo problema?
Quello a cui sto pensando è di creare una funzione che calcola la velocità in relazione al punto di partenza dell'animazione. Dovrebbe funzionare anche se non so come realizzarla!!!

CIao

[cavicchiandrea]

Io non mi complicherei lo script farei uno scroll semplice

[termopili]

Pensavo di aver fatto uno scroll semplice...ma poi è sorto questo problema!!!
La pagina è veramente molto lunga, quindi, per facilitare gli utenti, diventa quasi necessario usare un pulsante che permetta lo scroll automatico.

$(document).ready(function () 
{
	$('#up').mouseover(function()
	{
		$('html, body').animate({scrollTop: 0}, 200000);	
	});
	$('#up').mouseout(function()
	{
		$('html, body').stop();	
	});
	$('#down').mouseover(function()
	{
		$('html, body').animate({scrollTop:$('#end').position().top}, 200000);	
	});
	$('#down').mouseout(function()
	{
		$('html, body').stop();	
	});
});

QUesto è quello che ho usato...più semplice di così!!!

PS: ma in questa nuova risposta rapida non ci sono le opzoni per mettere i tag del codice??? (questo l'ho scritto a memoria)

[termopili]

A quanto pare questo è un caso che non sia mai capitato a nessuno online...comunque o risolto "alla buona" (non è perfetto) e gradirei condividerlo con tutti gli sfortunati che avranno a che fare con questo stesso problema.

$(document).ready(function () 
{
var height= $("#main").height();
$("body").css("height", height);
	$('#up').mouseover(function()
	{
		if($(window).scrollTop() < height/2)
		{
			$('html, body').animate({scrollTop: 0}, 200000, 'easeOutSine');
		}
		else
		{
			$('html, body').animate({scrollTop: 0}, 600000 , 'easeOutSine');
		}
	});
	$('#up').mouseout(function()
	{
		$('html, body').stop();	
	});
	$('#down').mouseover(function()
	{
		if($(window).scrollTop() < height/2)
		{
			$('html, body').animate({scrollTop:$('#end').offset().top}, 600000 , 'easeOutSine');	
		}
		else
		{
			$('html, body').animate({scrollTop:$('#end').offset().top}, 200000, 'easeOutSine');	


		}
	});
	$('#down').mouseout(function()
	{
		$('html, body').stop();	
	});
});

Praticamente non ho fatto altro che determinare l'altezza totale (nel mio caso oltre i 60000 px...e sono solo all'inizio) e dividerla per due, se si sta nella parte superiore del body la velocità di discesa è maggiore di quella di salita e viceversa se ci sitrova nella parte inferiore. Inoltre ho aggiunto easeOutSine in modo da bilanciare la differenza di velocità che si viene a creare man mano che si scrolla.

Ho fatto bene???

Ciaoo

[Xinod]

una cosa del genere mi sembra meno arbitraria (perche' non legata al mezzo documento)

			var totalTime=6000;


		
			$('#down, #up').mouseenter(function(){
				var totalDistance = $(document).height();
				var isUp=!!$(this).is('#up');
				var pos=$(window).scrollTop();
				var dest=(isUp)?0:totalDistance;
				var time=(pos-dest)*(totalTime/totalDistance)
				if(time<0) time*=-1;
				
				$('html, body').animate({scrollTop: dest}, time, 'linear');
			})
			$('#down, #up').mouseleave(function(){
				$('html, body').stop(); 
			})

ciao

[termopili]

Ciao Xinod e grazie un milione per avermi risposto.
Ieri ho avuto abbastanza tempo senza PC davanti per pensare ad una soluzione a questo problema, poichè quella che avevo trovato era proprio una ciofeca (sena PC davanti a volte si ragiona meglio ). Ed ecco qui che realizzo che, quello che lo script chiama speed, è in realtà il tempo di percorrenza (in questo caso è molto evidente ciò).
Per cui ragiono sulla basilare formula della fisica v=s/t per cui t=s/v ed ecco qui che credevo di aver scoperto l'uovo di colombo.
Poi arrivo a casa e, per scrupolo, do un'occhiatina prima questo forum..ed ecco che vedo la tua soluzione. Brillante!!! Praticamente mi hai anticipato, però a quel punto ci tenevo a mettere in pratica la mia di soluzione (almeno per vedere se avevo ragione), per cui ho tirato fuori questo:

$(document).ready(function () 
{
	$('#up').mouseover(function()
	{
		var pos=$(window).scrollTop();
		var end=$('#end').offset().top;
		var time= pos/.2 ;
		$('html, body').stop();	
		$('html, body').animate({scrollTop: 0}, time, 'linear');
	});
	$('#up').mouseout(function()
	{
		$('html, body').stop();	
	});
	$('#down').mouseover(function()
	{
		var pos=$(window).scrollTop();
		var end=$('#end').offset().top;
		var time= (end - pos)/.2 ;
		$('html, body').stop();	
		$('html, body').animate({scrollTop:$('#end').offset().top}, time, 'linear');
	});
	$('#down').mouseout(function()
	{
		$('html, body').stop();	
	});
});

Non è ottimizzato e bello come il tuo, ma funziona perfettamente ed è anche un piacere vederlo!!!
In ogni caso grazie ancora tante per il tuo aiuto!!!
CIAOOO

[Xinod]

di nulla, anche la tua soluzione va bene, anche meglio

ciao