Question

我有一个带滚动条的html页面（默认滚动条）＆amp;我在页面底部有一个小表单。

现在问题是我向下滚动＆amp;点击选择/列表菜单从表单中选择任何选项，滚动条向上移动。为什么会这样？我仍然可以选择选项，因为页面不是很长。为什么滚动条会上升？有人可以帮我吗？

我读到有时#link可能是原因，我尝试删除它，但仍然是相同的。在我的页面中还有“onfocus = ... ，我尝试删除它并测试它但它仍然会上升。

提前致谢。

这是表单的代码。

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

这是更新后的代码。删除＃删除

<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

您正在使用<dl>标记，就好像它是一个下拉列表，但它确实是definition list。下拉列表是使用<select>标记创建的，一旦您修复了该标记，您将不再需要<a href="#">项（导致滚动）。

单击链接时页面向上滚动

1 个答案: