Sto iniziando con javscript e mi sto esercitando(per ora non voglio utilizzare frameworks)..ho in una pagina una barra fissa in alto,sulla quale c'è un "pulsante" (un' <a> in realtà) dove al click appare un div..fino qui,il mio codice è perfettametne funzionante..il fatto è che se io sto con la pagina giù("scrollata",per intenderci),quando clicco,la pagina mi torna su(lo scroll torna all'inizio della pagina),ed è un problema..praticamente come faccio perchè il div che deve apparire faccia parte della barra?? che in qualsiasi punto della pagina,mi trovo,non torni su lo scroll? ..per intenderci,la barra che fb ha in alto,quando clicco sul disegnino dei messaggi o delle notifiche,il div si apre in qualsiasi punto della pagina mi trovo..ho pensato alle varie proprietà offset,ma non so se è la soluzione esatta,e neanche so come implementarle...qui vi lascio i vari codici e vi ringrazio per qualsiasi suggerimento.

HTML
codice:
<div id="bar_fixed">
			<ul>
				[*]			
					<a href="#" class="bar_element_div" id="bar_element_div_login">
						<span class="bar_element">Login</span>
					</a>
				
			[/list]
			<div class="hidden_div" id="login">
				<div id="login_contenuto" class="contenuto_div">
					<form action="login.php" method="post">
						<label for="user_id">Nome Utente</label>
						<input type="text" id="user_id" name="user_id" />
						<label for="user_psw">Password</label>
						<input type="password" id="user_psw" name="user_psw" />
						<button id="login_bot">Login</button>
					</form>
				</div>
			</div>
		</div>
		<div id="container_anteprima">
		
		</div>
Javascript
codice:
var bar_element_div_login=document.getElementById('bar_element_div_login');
bar_element_div_login.addEventListener('click',function(){new toggleDiv('login');},false);
function toggleDiv(id_div){
	this.obj=document.getElementById(id_div);
	this.obj.style.display='block';	
	this.colore=0;
	this.toggleOpac();
}
toggleDiv.prototype.toggleOpac=function(){
	this.colore+=10;
	if(this.colore<100){		
		this.obj.style.opacity=this.colore/100;
		var a=this;
		window.setTimeout(function(){a.toggleOpac();},50);
	}
}
CSS
codice:
#bar_fixed ul{
	list-style: none;
}
#bar_fixed{
	padding-left: 10px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #3d81f1;
	height: 40px;
	z-index: 300;
}
.bar_element_div{
	position: relative;
	top: 10px;
	height: 29px;
	width: 70px;
	text-align: center;
	color: #d7deea;
	text-decoration: none;
}
.bar_element_div:hover{
	background-color: #548ff1;
	border-radius: 5px 5px 0 0;	
	color: #FFF;
}
.bar_element{
	position: relative;
	top: 5px;
	font-family: 'Futura',sans-serif;
	font-size: 15px;
	font-weight: bold;
}
#bar_element_div_login{
	position: absolute;
	right: 10px;
}

.hidden_div{
	display: none;
	border: 1px solid #ccc;
	height: 170px;
	width: 250px;
	border-radius: 10px;
}
#login{
	position: absolute;
	top: 41px;
	right: 10px;
}
.contenuto_div{
	margin: auto;
	position: relative;
	top: 20px;
	width: 170px;
	height: 150px;
	font-family: 'Futura',sans-serif;
	font-size: 10px;
	color: #6c6c6c;

}
.contenuto_div input{
	display: block;
	position:relative;
	height: 20px;
	width: 168px;
	margin-top: 5px;
	margin-bottom: 5px;
} 
.contenuto_div button{
	position: absolute;
	right: 0px;
	height: 25px;
	width: 50px;
	margin-top: 10px;
	background-color: #3d81f1;
	border-radius: 10px;
	color: #d7deea;
	font-family: 'Futura',sans-serif;

}
.contenuto_div button:hover{
	color: #FFF;
	background-color: #548ff1;
}


#container_anteprima{
	padding: 10px;
	position: relative;
	left: 50px;
	top: 100px;
	height: 300px;
	width: 400px;
	border-radius: 10px;
	border: 1px solid #3d81f1;
}