javascript toggle function causes page to scroll to the top

Question

I have a small problem with a webpage returning back to the top of the page after a javascript function is executed.

Basically, I have a small javascript function that toggles the visibility of a div by changing it's display style. the code is the following:

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

I then call this with a link that looks like this:

<a href="#" onclick="toggle_visibility('001');" class="expand">[+/-] Hide/Show Info</a>

and the div looks something like this:

<div id="001" style="display:none;">
hello world
</div>

This works just fine. But when I click on my "expand/hide" link to toggle the visibility of the div, the page always returns to the top, so I have to scroll back down to the bottom every time.

I have tried adding the the following changes at the end of my javascript function, but neither of them works:

window.location = 'test.php#' + id; //where test.php is my current page

and

window.location.hash=id;

Any help would be appreciated in fixing this issue Thanks.

The use of ``within the script tag is deprecated. – Reporter Aug 07 '14 at 13:37 — Reporter, Aug 07 '14 at 13:37
@reporter thanks, I'll remove it – IronWilliamCash Aug 07 '14 at 14:16 — IronWilliamCash, Aug 07 '14 at 14:16

mplungjan · Accepted Answer · 2016-07-15T06:56:03.277

8

It is recommended to not overload a link, but use a span instead:

Live Demo

<style>
.expand { cursor:pointer; }
</style>

<span data-div="x001" 
 class="expand">[+/-] Hide/Show Info</a>

Also I strongly recommend to

not use numerical IDs
not use inline event handlers

So

window.onload=function() {
  var links = document.querySelectorAll(".expand");
  for (var i=0;i<links.length;i++) {
    links[i].onclick=function(e) {
      e.preventDefault();  
      var ele = document.getElementById(this.getAttribute("data-div"));
      if (ele) ele.style.display = ele.style.display == "block"?"none":"block";
    }
  }
}

using

<div id="x001">...</div>

With a link, you can use a page as href to tell the user to enable JS or suffer the consequences :)

<a href="pleaseenablejs.html" data-div="x001" 
 class="expand">[+/-] Hide/Show Info</a>

To fix your code you need to return false. In newer browsers, use event.preventDefault

function toggle_visibility(id) {
   var elm = document.getElementById(id);
   elm.style.display = elm.style.display == "block"?"none":"block";
   return false;
}

using

<a href="#" onclick="return toggle_visibility('001');" 
 class="expand">[+/-] Hide/Show Info</a>

edited Jul 15 '16 at 06:56

answered Aug 07 '14 at 13:37

mplungjan

169,008
28
173
236

2

c) not use `href="#"` – Niet the Dark Absol Aug 07 '14 at 13:39
1

`javascript:void(null);` works perfectly fine when JS is disabled: it does nothing. Whereas, `href="#"` still kicks you to the top of the page if JS is disabled. – Niet the Dark Absol Aug 07 '14 at 13:48
-goes to try it- Hmm, nope, not giving me a 404! – Niet the Dark Absol Aug 07 '14 at 13:54
Hmm, it used to. Never mind. It is ugly and breaks right-click, open in new tab and if you do not like # use a span – mplungjan Aug 07 '14 at 14:02
I tried the above and return false just makes the link stop working. Also, numerical IDs are only used as example, they have nice descriptive names normally. I'll change my links to spans though as everyone seems to thinks this is a better idea. Thanks for the help – IronWilliamCash Aug 07 '14 at 14:03
Return false on its own will stop the link - you still need to toggle the div. Also if you chose to change to a span, please accept my answer since I suggested it – mplungjan Aug 07 '14 at 14:08

score 3 · Answer 2 · edited May 23 '17 at 10:32

3

after the click event your link redirects the url to "#" as you are not stopping event propagation.

you can achieve that by changing your href javascript:void(0).

If you ask why here your answer.

edited May 23 '17 at 10:32

Community

1
1

answered Aug 07 '14 at 13:43

Onur Topal

3,042
1
24
41

@mplungjan I will change the link to a span though, for the reasons you mentionned. Thanks for the help :) Please don't sigh because of me :) – IronWilliamCash Aug 07 '14 at 14:05

score 2 · Answer 3 · answered Aug 07 '14 at 13:40

2

use

<a href="javascript:void(0)" onclick="toggle_visibility('001');" class="expand">[+/-] Hide/Show Info</a>

answered Aug 07 '14 at 13:40

rneves

2,013
26
35

1

that also means onclick is not going to work which also means nothing is working. also there is no no-js fallback. – Onur Topal Aug 07 '14 at 13:46
I tried this and it gives me an "access forbidden 403 error" – IronWilliamCash Aug 07 '14 at 13:57

javascript toggle function causes page to scroll to the top

3 Answers3