JavaScript-点击链接后，页面返回顶部

Question

This makes it anoying because you have to scroll back down to where you were. Can someone tell me what this behavior is.

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

Html

<a href="#" onclick="toggle_visibility('foo');">School Area</a>
<div id="foo" style="display: none;">...</div>

Answer 1

This happens because href="#" tells the browser to jump to the top of the page when the link is clicked.

You can prevent that default action by returning false from your onclick attribute handler:

<a href="#" onclick="toggle_visibility('foo');return false;">School Area</a>

---

But as you're using jQuery, consider attaching that event handler dynamically (or even using event delegation), and then use preventDefault :

<a href="#" class="toggle-vis" data-visibility="foo">School Area</a>

then here's a delegated handler:

$(document.body).on("click", ".toggle-vis", function(e) {
    e.preventDefault();
    toggle_visibility(this.getAttribute("data-visibility"));
});

note how the data-visibility attribute controls what we toggle.

---

You'll get people telling you to change this line:

toggle_visibility(this.getAttribute("data-visibility"));

to

// Only do this if you understand what `data` does
toggle_visibility($(this).data("visibility"));

but data is not just an accessor for data-* elements, it does more (and less) than that. If you don't need the features that work sets up, there's no need to wrap the element in a jQuery instance and call data. But if you prefer More jQuery™:

toggle_visibility($(this).attr("data-visibility"));

also works.

Answer 2

This happens because of # . Add this to href :

<a href="javascript:void(0)"></a>

Answer 3

Default behavior of <a> elements is navigation/redirection

Use e.preventDefault() to prevent default action

 function toggle_visibility(e, id) { e.preventDefault(); var e = document.getElementById(id); if (e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } 

 <a href="#" onclick="toggle_visibility(event,'foo');">School Area</a> <div id="foo" style="display: none;">...</div> 

Answer 4

This is the default behaviour of this element you can use

Use javascript:void(0) in href to avoid its behaviour.

<a href="javascript:void(0)" onclick="toggle_visibility('foo');">School Area</a>

OR

use preventDefault() in function to prevent its default behavior to execute.

function toggle_visibility(e, id) {
   e.preventDefault();
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

Answer 5

you may also change from

<a href="#" onclick="toggle_visibility('foo');">School Area</a>

to

<a style="cursor:pointer;text-decoration:underline;color:blue"
  onclick="toggle_visibility('foo');"
>School Area</a>