href#移动滚动位置

Question

您好，当您单击 link 我希望它切换 'vartalo' 而无需页面滚动到顶部，我希望 'A' 像 link那但不希望它向上滚动页面。

<!DOCTYPE html >  
<html>    
<style>    
#oikea{
position:absolute; 
top:800px;  
}    

.paneelinvartalo{   
border:1px solid black;   
background-color:lightblue;   
margin-top:5px;    
padding:15px;    
height:200px;   
width:200px;   
}

</style>  
<body>    
<div id="panel1" class="paneelinvartalo">vartalo    
</div>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">   
</script>

<script>   
$(function(){    
   $('.nappulat').click(function(){   
   $('#panel1').toggle(200);            
   });  
   });

</script> 
<div id="oikea" >   
<a class="nappulat" href="#" rel="">A< /a>     
</div>    
</body>      
</html>

Answer 1

$(function(){    
    $('.nappulat').click(function(event){
        event.preventDefault();
        $('#panel1').toggle(200);
    });
});

Answer 2

将您带到页面顶部是 link 的默认操作。 URL # 是空书签，与 link 指向位于页面顶部的命名书签锚点相同。

使用preventDefault方法停止link的默认动作:

$('.nappulat').click(function(e){
  e.preventDefault();
  $('#panel1').toggle(200);
});

href#移动滚动位置

href# moves the scroll position

jquery

button

toggle