Javascript help, toggle text keeps jumping back to top of page - Stack Overflow

admin管理员组

文章数量:1332361

I hope someone can help with this issue, I've tried many scripts and workarounds, but can't get this simple thing to work. As the title has it, how can I make my text NOT jump to the top of the page. Here is the code:

<script type="text/javascript">
function toggleVisibility() {
  document.getElementById("toggleMe").style.display = "";
  if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
    document.getElementById("toggleMe").style.visibility = "visible";
  }
  else {
  document.getElementById("toggleMe").style.visibility = "hidden";
   ev.preventDefault();
    return false;

  }
}
</script>



 <a href="#" onclick="toggleVisibility();">Click to toggle visibility.</a></p>
 
<div id="toggleMe" style="visibility: hidden;"> Something to Hide and show.

Display collapses it's layout while visibility will keep it's layout.

All in the same html file. I read what outhers did and I tried the

ev.preventDefault(); return false;

code at the end of the function, but nothing.

I hope someone can help with this issue, I've tried many scripts and workarounds, but can't get this simple thing to work. As the title has it, how can I make my text NOT jump to the top of the page. Here is the code:

<script type="text/javascript">
function toggleVisibility() {
  document.getElementById("toggleMe").style.display = "";
  if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
    document.getElementById("toggleMe").style.visibility = "visible";
  }
  else {
  document.getElementById("toggleMe").style.visibility = "hidden";
   ev.preventDefault();
    return false;

  }
}
</script>



 <a href="#" onclick="toggleVisibility();">Click to toggle visibility.</a></p>
 
<div id="toggleMe" style="visibility: hidden;"> Something to Hide and show.

Display collapses it's layout while visibility will keep it's layout.

All in the same html file. I read what outhers did and I tried the

ev.preventDefault(); return false;

code at the end of the function, but nothing.

• javascript
• text
• toggle

Share Improve this question Follow edited Dec 2, 2020 at 13:21 peterh 1 asked Feb 15, 2011 at 13:19 OllieOllie 5122 silver badges66 bronze badges 1

• you don't need ev.preventDefault(); return false; also depending on the rest of your markup there could be some nuances, for example missing closing tags, other improper html, etc. – Kris Ivanov Commented Feb 15, 2011 at 13:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Change the href attribute in the A tag to: javascript:; instead of #

So use this to create your javascript enabled anchor:

<a href="javascript:;">

added (background info):

The # character indicates a bookmark. By omitting the name of the bookmark e.g. #bottom the browser considers the bookmark as 'top of the page' thus scrolling to the top. Your problem does not have to do anything with bookmarks, however using # to define an empty link for a javascript enabling anchor (A) tags is not the way to go. You should use: javascript:; or javascript:void(0); to indicate that this is not a navigation anchor.

Or simply always return false, not just in the Else clause.

本文标签： Javascript helptoggle text keeps jumping back to top of pageStack Overflow