Javascript 按钮 onClick 使页面跳转到页面顶部

Button onClick makes page jump to top of page

提问by Grizzly

I have a few buttons on my page and onclickthey show or hide a few <div>elements.

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

The <div>elements are positioned towards the bottom of the page so scrolling to those <div>elements is necessary.

这些<div>元素位于页面底部，因此需要滚动到这些<div>元素。

Whenever I click on a button, the page jumps to the top. So how do I create an anchor so that when the user clicks the button it will stay on that section of the page?

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

Here is one of the buttons:

这是其中一个按钮：

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

Here is the <div>that appears when the button above is clicked:

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

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

Here is the JavaScript:

这是 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;
});

Here is my research:

这是我的研究：

Article 1

第1条

Any help would be appreciated.

任何帮助，将不胜感激。

UPDATE

更新

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

When I click the button.. I scroll down to see the div that appeared.. then click on another button (that look the exact same as above) and the page returns to the top.

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

回答by Jones Joseph

Firstly mention the element correctly in the title. Its a anot button.

首先在标题中正确提及该元素。它a不是button。

Next: The #in your atag will by default take you to the top of the page when you click on it.

下一步：#在您的a标签中，当您点击它时，默认情况下会将您带到页面顶部。

Use a javascript:void()in the hrefattribute to overcome this.

javascript:void()在href属性中使用 a来克服这个问题。

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

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

Example snippet

示例片段

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

回答by Quangdao Nguyen

This is because an href starting in "#" jumps to the element of that id. For example, href="#mydiv"jump to the element with an id of "mydiv" (nothing happens if that element doesn't exist, so this could be a solution). In the case where no id is provided (ie. Your case; href="#"), it jumps to the top of the page. My go-to solution is adding a preventDefault to the click handler, which "negates" existing behaviors. It can be done like so:

这是因为以“#”开头的 href 会跳转到该 id 的元素。例如，href="#mydiv"跳转到 id 为“mydiv”的元素（如果该元素不存在，则不会发生任何事情，因此这可能是一个解决方案）。在没有提供 id 的情况下（即您的情况；href="#"），它会跳转到页面顶部。我的首选解决方案是向点击处理程序添加一个 preventDefault ，它“否定”现有行为。可以这样做：

$('.button').click(function() {
 $('#lastclicked').text(this.textContent);
});

$('.button-x').click(function(e) { // Passes the event to the function to allow the prevent default function.
 e.preventDefault();
 $('#lastclicked').text(this.textContent);
});

// Click each of the buttons and notice how the first two jumps to either the div of the top, but the third button ("button-x") doesn't move anything.

body {
    height: 5000px;
    padding: 50px;
}

.buttons {
    position: fixed;
    bottom: 0;
}

.button, .button-x {
    display: inline-block;
    padding: 20px;
    background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
    <a href="#" class="button">Link with href="#"</a>
    <a href="#mydiv" class="button">Link with href="#mydiv"</a>
    <a href="#" class="button-x">Link with href="#", but a preventDefault.</a>
</div>
<div id="mydiv">
    Last clicked: <span id="lastclicked"></span>
</div>

The important part is the e.preventDefault(), which is the function that blocks the initial behavior of the anchor tag. All you have to do is put that somewhere in your click handler. Make sure to pass "e" as a parameter.

重要的部分是e.preventDefault()，它是阻止锚标签初始行为的函数。你所要做的就是把它放在你的点击处理程序中的某个地方。确保将“e”作为参数传递。

回答by getHymanx

General fix

一般修复

Don't use <a>-Tags for your buttons. Convert the <a>-Tags to <button>-Tags or something else (span, p, etc.)

不要在按钮上使用 <a>-Tags。将 <a>-Tags 转换为 <button>-Tags 或其他东西（span、p 等）

Explanation

解释

That is pretty simple. Your <a>-Tags (namely the buttons) link to '#' which is the so called fragment part of an URI.

这很简单。您的 <a>-Tags（即按钮）链接到“#”，即所谓的 URI 片段部分。

Usually fragments are HTML tags which are identified by a name (pre-HTML5)

通常片段是由名称标识的 HTML 标签（HTML5 之前）

<a name="top">This is the top section</a>
<a href="#top">Jump to top</a>

or an id (HTML5)

或 id (HTML5)

<div id="my-section">Coming soon</div>
<a href="#my-section">Jump to my-section</a>

Because you didn't specify the fragment or didn't use correct one the browser will scroll to the top of the page.

因为您没有指定片段或没有使用正确的片段，浏览器将滚动到页面顶部。

回答by Wiredo

Have you tried this solution from http://stackoverflow.com/questions/11815295/javascript-inline-onclick-goto-local-anchor

您是否从http://stackoverflow.com/questions/11815295/javascript-inline-onclick-goto-local-anchor尝试过此解决方案

You can use this function on your anchor:

您可以在锚点上使用此功能：

function goToAnchor(anchor) {
  var loc = document.location.toString().split('#')[0];
  document.location = loc + '#' + anchor;
  return false;
}

Usage:

用法：

<a href="#anchor" onclick="goToAnchor('anchor')">Anchor</a>

Note that the anchor needs to be enclosed in quotes, without the hash prefix.

请注意，锚点需要用引号括起来，没有哈希前缀。

回答by Amit Kumar

update href property of atag to javascript:void();

将a标签的href 属性更新为javascript:void();

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

Demo

演示

javascript:void();It'll not let link to navigate anywhere.

javascript:void();它不会让链接在任何地方导航。

回答by Alexis

I suggest you a different approach more generic. Easiest to use and maintain.

我建议您采用更通用的不同方法。最容易使用和维护。

Use only one classfor each button to detect the click. And store in dataproperty the element that you want to show.

class每个按钮只使用一个来检测点击。并将data要显示的元素存储在属性中。

$(".btn-section").click(function(){
  var classToShow = $(this).data("class-show");
  $(".section").hide();
  $("." + classToShow).show();
});

.section{
display:none;
}

.content{
width:100%;
height:2000px;
background-color:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Lot of content</div>
<button class="btn-section" data-class-show="section1">Section 1</button>
<button class="btn-section" data-class-show="section2">Section 1</button>
<button class="btn-section" data-class-show="section3">Section 1</button>

<div class="section section1">Section 1</div>
<div class="section section2">Section 2</div>
<div class="section section3">Section 3</div>

This resolve your problem too.

这也可以解决您的问题。