Visualizzazione dei risultati da 1 a 9 su 9
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2012
    Messaggi
    199

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

    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

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Probabilmente è perché la velocità non è fissa ma calcolata in base alla distanza che hai da scrollare
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2012
    Messaggi
    199
    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

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Io non mi complicherei lo script farei uno scroll semplice
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2012
    Messaggi
    199
    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.
    codice:
    $(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)

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2012
    Messaggi
    199
    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.
    codice:
    $(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

  7. #7
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    una cosa del genere mi sembra meno arbitraria (perche' non legata al mezzo documento)
    codice:
    			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

  8. #8
    Utente di HTML.it
    Registrato dal
    Sep 2012
    Messaggi
    199
    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:
    codice:
    $(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

  9. #9
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    di nulla, anche la tua soluzione va bene, anche meglio

    ciao

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.