Question

我有这个简单的HTML代码

<html>
<body>
<select name="country" id="country">
<option value="1">Falkland Islands (Malvinas)</option>
<option value="2">canada</option>
<option value="3">Finland</option>
<option value="4">France</option>
<option value="5">United Kingdom</option>
<option selected="selected" value="12">United States</option>
</select>
</body>
</html>

如果此下拉菜单位于网页底部，并且每当用户选择菜单上的其中一个选项时，用户会自动转到网页顶部而不重新加载，我知道这很简单，但我不能做到了，希望你帮助我们，谢谢。

Answer 1

这应该为您处理...将其添加到您的<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("select#country").change(function() {
          $("html, body").animate({ scrollTop: 0 }, "slow");
          return false;
        });
    });
</script>

Answer 2

在您文件的head中，放置以下小片段：

<script type="text/javascript">
    window.onload = function(){
        document.getElementById("country").onchange = function(){
            window.scrollTo(0, 0);
        };
    };
</script>

没有必要为这样的简单操作加载jQuery;为Vanilla JavaScript可以轻松处理的内容包含如此大的文件毫无意义。

下拉菜单onclick返回到网页顶部

2 个答案: