javascript - anchor 元素onClick使页面跳转到页面顶部

Question

我的页面上有几个按钮和 onclick他们显示或隐藏了一些 <div>元素。

<div>元素位于页面底部，因此滚动到那些 <div>元素是必需的。

每当我点击一个按钮时，页面就会跳到顶部。那么我该如何创建一个 anchor ，以便当用户单击按钮时它会停留在页面的那个部分？

这是其中一个按钮:

<p class="text-center"><a id="Button-1" class="btn btn-default" href="#" role="button">View Details</a></p>

这是 <div>单击上面的按钮时出现:

<div class="row">
    <div id="Section-1" class="col-md-10">
        <p>The section to appear.</p>
    </div>
</div>

这是 JavaScript:

$("#Button-1").click(function () {
    $("#Section-2").hide();
    $("#Section-3").hide();
    $("#Section-1").toggle("show");
    $("#Button-1").text(function(i, text) {
        return text === "View Details" ? "Hide Details" : "View Details";
    });
    return false;
});

这是我的研究:

Article 1

如有任何帮助，我们将不胜感激。

更新

<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></p>

当我单击该按钮时..我向下滚动以查看出现的 div..然后单击另一个按钮(看起来与上面完全相同)并且页面返回到顶部。

Answer 1

首先在标题中正确提及元素。这是一个a不是 button .

下一个:#在你的a当您点击标签时，默认情况下会将您带到页面顶部。

使用 javascript:void()在href克服这一点的属性。

赞<a href='javascript:void();'>something</a>

示例片段

<div>

  Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>

  <a href='javascript:void();'>this</a>
</div>