Evitar Scroll al hacer menú responsive

[madman_18]

Hola a todos!

Construyendo un menú que se vuelva responsive me he dado cuenta de lo siguiente: Cuando lo muestro, siempre me hace scroll hacia arriba y no entiendo por qué.

El código es el siguiente:

Código HTML:

<header class="cabecera">            
            <div class="contenedor">
                <article class="logotipo">
                    <img src="imagenes/logo.png"/>
                </article>                
            </div>
            <div class="acciona-menu">
                <a href="#" class="despliega-mobile" id="despliega-mobile"><span>Men&uacute;</span><img src="imagenes/menu.png"/></a>                 
            </div>            
            <nav class="menu">
                <ul>
                    <li><img class="logo-menu" id="logo-menu" src="imagenes/icon-chic.png"/></li>
                    <li><a href="#cooperativa">Cooperativa</a></li>
                    <li><a href="#servicios">Servicios</a></li>
                    <li><a href="#socios">Socios</a></li>
                    <li><a href="#contacto">Contacto</a></li>
                    <div class="limpia"></div>
                </ul>
            </nav>            
        </header>
 

Y el CSS:

Código CSS:

/*Menu Responsive*/
    .acciona-menu{width:40%;height:auto;display:block;text-align:center;position:absolute;right:0;top:10px;}    
    .acciona-menu a{color:#585858;margin:0 5px;}    
    .acciona-menu a img{margin: 0 auto 0 5px;vertical-align:bottom;}
    .menu{float:none;height:auto;}
    .menu ul{height:auto;max-height:0;overflow:hidden;background:url('imagenes/menu-movil.png')repeat;}
    .menu ul li{display:block;padding:0;width:100%;}
    .menu ul li:first-child{display:none;}
    .menu ul li a{color:#FFF;}
    .menu  ul.open-responsive-menu{width:100%;max-height:400px;transition: max-height .5s;position:absolute;left:0;top:0;}
    .menu.nav-active{opacity: 1;} 
    .menu-fijo{position:relative;}
 

Ahora, cuando se lanza el evento este de jQuery, el cual solamente añado o quito la clase:

Código Javascript:

$(document).ready(function(){
               var myTrigger = $('#despliega-mobile');
                var menu = $('.menu').find('ul');              
                myTrigger.stop().click(function(){
                    var pulsado = $(this);
                    pulsado.toggleClass('nav-active');
                    menu.toggleClass('open-responsive-menu');
                }); 
            });
 

Al pulsar, se me va hacia arriba y no entiendo por qué

[siddartha23]

Después de llamar a la función .click(), en la línea 5 de tu Jquery debes añadir un event.preventDefault(); para que no se ejecute el href="#" que le has dado al vínculo .despliega-mobile"