JavaScript - Page goes back to the top after clicking on link

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>

Possible duplicate of [How to prevent a click on a '#' link from jumping to top of page in jQuery](http://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page-in-jquery) — Gaurav Aggarwal, Aug 10 '16 at 06:57

score 3 · Accepted Answer · answered Aug 10 '16 at 06:27

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.

score 2 · Answer 2 · answered Aug 10 '16 at 06:27

2

This happens because of #. Add this to href:

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

answered Aug 10 '16 at 06:27

Teuta Koraqi

1,898
1
10
28

score 2 · Answer 3 · answered Aug 10 '16 at 06:27

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>

score 1 · Answer 4 · answered Aug 10 '16 at 06:27

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';
}

score 0 · Answer 5 · answered Aug 10 '16 at 06:30

0

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>

answered Aug 10 '16 at 06:30

some1

857
5
11

JavaScript - Page goes back to the top after clicking on link

5 Answers5