CODEWITHSUNDEEP
jqueryhtmlonclick
air
air

Reputation: 6264

How to avoiding page scrolling on href="#"?

i am using one code for drop down menu

<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>

this works fine.

but the problem i am facing, i am using this menu on bottom of page and when i click its shows the behavior "#" and page scroll to top.

how to avoid this

Thanks

Upvotes: 0

Views: 113

Answers (3)

NeilC
NeilC

Reputation: 1390

Add the attribute onclick to the anchor element with a value of "return false", like so:

<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>

I changed my example to reflect your HTML code sample. Note the onclick attribute on the anchor tag.

Upvotes: 5

Grexis
Grexis

Reputation: 1512

Use

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

Upvotes: 2

Headshota
Headshota

Reputation: 21449

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

Upvotes: 2

Related Questions