CSS position:fixed non funziona su firefox

batello · Messaggio da **batello** » martedì 23 giugno 2015, 15:12

Salve, per un sito che sto scrivendo ho la necessità di creare un tool "torna su", ovvero un tool che ti riporta al top della pagina quando si scorre verso il basso.
Questo tool deve stare nella posizione in basso a destra della pagina sempre pertanto ho pensato di usare la funzione position:fixed.
Questo è il css.

Codice: Seleziona tutto

#ancora_top {
  background-attachment: scroll;
  background-color: #424443;
  background-repeat: no-repeat;
  border: medium none;
  border-radius: 4px;
  bottom: 20px;
  color: #ffffff;
  font-weight: bold;
  height: 50px;
  line-height: 12px;
  padding: 9px;
  position: fixed;
  right: 10px;
  text-align: center;
  visibility: hidden;
  width: 50px;
  z-index: 10000;
}

mentre l'html è semplicemente

Codice: Seleziona tutto

<a id="ancora_top" href="#" onclick="smoothScrollTo(0, 500)">
	<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>     
	<em>top</em>
</a>

Il punto è che su internet explorer funziona e, quando scendo con la pagina, il tool "mi segue" scendendo con me. Su firefox, invece, rimane fisso dov'è e non segue la pagina.

Per info, la versione di IE è la 11 mentre quella di firefox è 37.0.2

Messaggio da **Zoff** » martedì 23 giugno 2015, 16:13

A me sembra perfettamente funzionante:

Codice: Seleziona tutto

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf8">
	<title>Test FIXED</title>
	<style type="text/css">
		#ancora_top {
		  background-attachment: scroll;
		  background-color: #424443;
		  background-repeat: no-repeat;
		  border: medium none;
		  border-radius: 4px;
		  bottom: 20px;
		  color: #ffffff;
		  font-weight: bold;
		  height: 50px;
		  line-height: 12px;
		  padding: 9px;
		  position: fixed;
		  right: 10px;
		  text-align: center;
		  width: 50px;
		  z-index: 10000;
		}
	</style>
</head>
<body>
	<script>for(var i=0; i<1000; i++){ document.body.innerHTML += '<p>'+i+'</p>' }</script>
	<a id="ancora_top" href="#" onclick="smoothScrollTo(0, 500)">
	   <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>     
	   <em>top</em>
	</a>
</body>
</html>

Forum Ubuntu-it