如何避免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>

这很好用.

但我面临的问题是,我在页面底部使用此菜单,当我点击它显示行为"#"和页面滚动到顶部.

如何避免这种情况

谢谢

Answer 1

将属性onclick添加到锚元素,其值为"return false",如下所示:

<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属性.