Page scrolls upwards when I click on a link

Question

I have a html page that has a scrollbar (default scrollbar) & I have a small form at the bottom of the page.

Now the problem is when I scroll down & click on Select/List menu to select any option from the form, the scrollbar shifts up. Why is this happening? I can still select the options as the page is not very long. Why does the scrollbar go up? Can somebody help me with this?

I read that sometimes # link can be the reason, I tried removing it, but still the same. Also there is "onfocus=... in my page, I tried removing that & tested it but it still goes up.

Thanks in advance.

Here's the code for form.

<div class="bottom-form">
<form action="#" method="post">

<div class="main-inp-box">
<div class="inp-box">
  <label>
  <input type="text" name="textfield" id="textfield" class="field1" placeholder="Enter your first name" onblur="if(this.value=='') this.value='Enter your first name';" onfocus="if(this.value=='*Enter your first name:') this.value='';"/>
  </label>
</div>


<div class="inp-box">  
<label>
  <input type="text" name="textfield" id="textfield" class="field1" placeholder="Your email id here" onblur="if(this.value=='') this.value='Your email id here ';" onfocus="if(this.value=='*Your email id here:') this.value='';"/>
  </label>
</div>


<div class="inp-box" style="margin-right:0">
<dl id="sample" class="dropdown">
        <dt><a href="#"><span style="color:#dad9d9; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; font-style:italic; ">Select your role</span></a></dt>
        <dd>

            <ul>
            <div class="head2"><strong>Lorem ipsum</strong></div>
                <li><a href="#">Option1<span class="value">xx</span></a></li>
                <li><a href="#">Option2<span class="value">yy</span></a></li>
    <li><a href="#">Option3<span class="value">yy</span></a></li>
            </ul>

        </dd>
       </dl>
</div>

</div>

<div class="main">
<div class="notify_btn_box"><a href="#" class="red-btn"></a></div>
<div class="arrow"><img src="images/arrow.png" /></div>
</div>

<div style="text-align:center; margin-bottom:100px;"><span class="text-note">*we have no spam policy</span></div>

</form>
</div>

Here's the updated code. with # removed

<div class="inp-box" style="margin-right:0">
<dl id="sample" class="dropdown">
        <dt><a href=""><span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; font-style:normal; color:#909090; ">Select your role</span></a></dt>
        <dd>

            <ul>
            <div class="head2"><strong>Who are you?</strong></div>

                <li><a href="">Option1<span class="value">xx</span></a></li>
                <li><a href="">Option2<span class="value">yy</span></a></li>
                <li><a href="">Option3<span class="value">yy</span></a></li>
            </ul>
        </dd>
    </dl>
</div>

Answer 1

You're using the <dl> tag as though it's a dropdown list, but it's really a definition list. Dropdowns are created using the <select> tag, and once you fix that, you'll no longer need the <a href="#"> items (which are causing the scrolling).