Как избежать прокрутки страницы по href = "#"?

Question

я использую один код для выпадающего меню

<dl id="sample" class="dropdown"> 
     <dt><a href="#"><span>Please select the country</span></a></dt> 
     <dd> 
      <ul> 
       <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li> 
       <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li> 
       <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li> 
       <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li> 
       <li><a href="#">Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></a></li> 
       <li><a href="#">Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></a></li> 
       <li><a href="#">United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></a></li> 
       <li><a href="#">United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></a></li> 
      </ul> 
     </dd> 
    </dl> 

это работает отлично.

но проблема, с которой я столкнулся, Я использую это меню в нижней части страницы, и когда я нажимаю его, отображается «#» и страница прокручивается вверх.

, как избежать этого

Thanks

Answer 1

Добавьте атрибут OnClick к анкерной элемента со значением "вернуться ложным", например, так:

<dl id="sample" class="dropdown"> 
<dt><a href="#" onclick="return false;"><span>Please select the country</span></a></dt> 
<dd> 
    <ul> 
     <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li> 
     <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li> 
     <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li> 
     <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li> 
     <li><a href="#">Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></a></li> 
     <li><a href="#">Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></a></li> 
     <li><a href="#">United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></a></li> 
     <li><a href="#">United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></a></li> 
    </ul> 
</dd> 

Я изменил мой пример, чтобы отразить ваш образец кода HTML. Обратите внимание на атрибут onclick на теге привязки.

Answer 2

$('#sample a').click(function(event){ 
    event.preventDefault(); 
}) 

Answer 3

Использование

<a href='javascript:void(0);' ...>