Scroll Top

**Idas86** · 04-07-2010, 12:04

Ciao a tutti, premetto che di js non conosco quasi nulla, volevo creare un pulsante (cosa che ho già fatto in html con relativo css) che mi comparisse una volta superato un certo punto della pagina o non appena l'utente scrolla verso il basso, che una volta premuto mi riconduce al top della pagina.
Che codice dovrei usare, oltre al js ci sono altri metodi?
Grazie mille per il supporto!!!

**antotan** · 04-07-2010, 12:34

Utilizza jquery:

codice:

<html>
<head>
  <style>
  p { text-align: center;border:1px solid black; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<script>
	$(document).ready(function() {
	   
		$('a').click(function(){
			$('html, body').animate({scrollTop: 0}, 'slow');
			return false;
		});

	});
</script>

	

TOP PAGE</p>
	


		















		















		














		
		














	
		














	
		














	
		














	
	</p>
	<div style="text-align: center">
	TOP
	</div>
</body>
</html>

Devi solo formattarlo come ti pare e guardare un pò come far apparire il tasto solo quando l'utente scrolla verso il basso

**Idas86** · 04-07-2010, 12:59

Grazie mille per il codice... si difatti il problema maggiore era proprio quello che all'apparenza sembra secondario nel mio post, ovvero come far comparire il pulsante dopo un primo scroll... perché effettivamente il semplice link alla parte superiore lo si poteva ottenere anche con semplici ancore (anche se il risultato del tuo script è sicuramente molto più pulito e fluido).

**Idas86** · 04-07-2010, 13:40

Originariamente inviato da antotan
Utilizza jquery:

codice:

<html>
<head>
  <style>
  p { text-align: center;border:1px solid black; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<script>
	$(document).ready(function() {
	   
		$('a').click(function(){
			$('html, body').animate({scrollTop: 0}, 'slow');
			return false;
		});

	});
</script>

	

TOP PAGE</p>
	


		















		















		














		
		














	
		














	
		














	
		














	
	</p>
	<div style="text-align: center">
	TOP
	</div>
</body>
</html>

Devi solo formattarlo come ti pare e guardare un pò come far apparire il tasto solo quando l'utente scrolla verso il basso

Con l'attuale formattazione qualsiasi link attiva il codice... per assegniarlo ad uno specifico link come posso fare?
Scusa la neobbata!

Edit: Nulla... trovato... scusa
Ok rimane solo il problema prima citato...

**antotan** · 04-07-2010, 13:53

Si ovviamente quello è solo un esempio, poi devi guardarti jquery per creare quello che vuoi.

Per quanto riguarda l'altro problema, quando si attiva l'evento 'scroll' sulla tua finestra, mostri un pulsante (dove, come, quale... lo decidi tu). Un esempio:

codice:

<!DOCTYPE html>
<html>
	<head>
		<style>
			p{ position: fixed; bottom: 0px; display: none; font-size: large;, text-align:center; border: 1px solid black; cursor: pointer}
		</style>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(document).ready(function()
			{				
				$(window).scroll(function () { 
				  $("p").css("display", "inline").fadeIn("slow"); 				  
				});
				
				$('p').click(function()
				{
					$('html, body').animate({scrollTop: 0}, 'slow');
				});
			});
		</script>	
	</head>
	<body>
		

TOP PAGE</p>
		<div style="text-align: center; width: 50%; border: 1px solid black; margin: auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta scelerisque purus vitae posuere. Suspendisse in tellus sit amet lacus placerat blandit. Sed bibendum cursus nisl eleifend luctus. Donec id nibh magna. Vestibulum ut dui sed tellus consectetur semper. Praesent ac pharetra tellus. Nulla facilisi. Nulla viverra risus sed augue egestas gravida. Nullam mi neque, imperdiet quis ultricies sed, pellentesque sed ipsum. Phasellus ut ornare lorem. Curabitur nulla erat, blandit a interdum iaculis, sodales sed turpis. Proin consequat, magna non dictum lacinia, tellus risus sollicitudin turpis, quis mattis nibh est a eros. Praesent bibendum lorem hendrerit sapien egestas commodo eu vel felis.





Cras facilisis, nisi eu aliquam bibendum, ipsum mauris varius leo, vel rhoncus turpis metus vitae dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non elit ipsum. Nullam blandit adipiscing risus, id convallis nibh vestibulum et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum vulputate egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus velit nunc, gravida et congue quis, sollicitudin ac orci. Nulla facilisi. Aenean aliquet, tortor eget faucibus pellentesque, massa lorem adipiscing purus, a bibendum purus diam ac enim. Maecenas nec ullamcorper nisl.





Mauris cursus, elit ut consequat commodo, tortor orci dignissim orci, sed laoreet dui erat at mi. Phasellus et mauris arcu. Quisque vel dolor in urna sagittis porttitor. Curabitur eget adipiscing lorem. Pellentesque interdum, mi a tincidunt laoreet, turpis ipsum adipiscing nisi, in pulvinar lacus felis sed felis. Phasellus sit amet turpis risus. Duis vehicula posuere convallis. Pellentesque ut turpis sed neque varius luctus eget vel lacus. Integer molestie, dolor ut dictum elementum, nisl turpis mollis eros, quis fringilla leo nunc sed ligula. Sed pellentesque, diam vel ullamcorper tristique, tortor eros pretium diam, sit amet faucibus mauris eros a lectus. Nunc vitae orci ac massa imperdiet viverra. Nullam hendrerit interdum commodo. Aliquam erat volutpat. Quisque aliquet tempus dolor, sit amet tempor felis scelerisque ac. Donec aliquam tellus vel mi porttitor elementum. Ut vitae metus urna. Mauris mauris lorem, pretium in sollicitudin a, ornare eu urna.





Quisque vehicula nunc sed nisl ullamcorper adipiscing. Fusce molestie mattis luctus. Donec libero sem, pretium non consequat non, luctus sit amet ipsum. Nullam erat mauris, sagittis nec sollicitudin eget, scelerisque ac erat. Pellentesque volutpat consequat tellus vel bibendum. Nam mauris magna, ultrices vitae luctus vel, scelerisque ac lorem. Nunc leo dolor, aliquam eget porttitor ac, egestas in enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sagittis libero non neque suscipit rhoncus. Donec sed ligula risus, a ornare arcu. Maecenas sed elit eros. Pellentesque faucibus imperdiet lectus, id faucibus sem tincidunt ut. Morbi id consectetur eros. Maecenas fermentum magna vel dui placerat aliquet faucibus dui aliquam.





Quisque vehicula nunc sed nisl ullamcorper adipiscing. Fusce molestie mattis luctus. Donec libero sem, pretium non consequat non, luctus sit amet ipsum. Nullam erat mauris, sagittis nec sollicitudin eget, scelerisque ac erat. Pellentesque volutpat consequat tellus vel bibendum. Nam mauris magna, ultrices vitae luctus vel, scelerisque ac lorem. Nunc leo dolor, aliquam eget porttitor ac, egestas in enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sagittis libero non neque suscipit rhoncus. Donec sed ligula risus, a ornare arcu. Maecenas sed elit eros. Pellentesque faucibus imperdiet lectus, id faucibus sem tincidunt ut. Morbi id consectetur eros. Maecenas fermentum magna vel dui placerat aliquet faucibus dui aliquam.
		</div>
	</body>
</html>

In maniera simile puoi anche farlo scomparire quando ci rispostiamo all'inizio della pagina.

**Idas86** · 04-07-2010, 14:16

Stano che il fade in non mi vada in slow ma compaia in modo improvviso...
Non è che potresti scrivermi anche il codice per farlo scomparire?

non so proprio fare nulla in js :master:
Grazie mille per la pazienza e per questi codici... sono perfetti!

P.s. un ultima cosa, se volessi decidere a che punto preciso dello scermo far comparire o scomparire il pulsante cosa dovrei cambaire o settare?

**antotan** · 04-07-2010, 14:33

Stano che il fade in non mi vada in slow ma compaia in modo improvviso...

Si scusa, in realtà è:

codice:

$("p").fadeIn('slow');

Per far comparire/scomparire il pulsante usa:

codice:

			$(document).ready(function()
			{				
				$(window).scroll(function () { 
				  
				  if($(window).scrollTop() == 0)
				  {
					$("p").fadeOut('slow');
				  }
				  else
				  {
					$("p").fadeIn('slow');
				  }
				});
				
				$('p').click(function()
				{
					$('html, body').animate({scrollTop: 0}, 'slow');
				});
			});

Per posizionare il pulsante dove vuoi tu ti rimando nella sezione apposita del forum che ne sapranno di sicuro di più

**Idas86** · 04-07-2010, 14:42

Originariamente inviato da antotan
Per posizionare il pulsante dove vuoi tu ti rimando nella sezione apposita del forum che ne sapranno di sicuro di più

No nn intendevo dove posizionare il pulsante, ma intendevo come faccio a scegliere a che altezza (linea) della pagina si attiva il codice per far comparire il pulsante.

**antotan** · 04-07-2010, 14:50

Qui:

codice:

$(window).scroll(function () { 
				  
  if($(window).scrollTop() == 0)
  {
    $("p").fadeOut('slow');
   }
   else
   {
      $("p").fadeIn('slow');
    }
});

Al posto del semplice 'else', fai il test sul valore di scrollTop, tipo

codice:

else if ($(window).scrollTop() == 200)...

**Idas86** · 04-07-2010, 14:52

Perfetto!!!
Grazie davvero! Gentilissimo!!!!

Discussione: Scroll Top

Strumenti discussione

Ricerca discussione

Visualizza

Scroll Top

Permessi di invio