ansaurus

Question

How to use JS to jump to a specific place in a page? Tried scrollIntoView, not working

Answer 1

+3 A:

Use window.location.hash

function changeVisibility(parentID, elementID) {
  document.getElementById(elementID).style.visibility="visible";
  document.forms[0].parent_id.value=parentID;
  window.location.hash = '#' + elementID;
  return false;
}

<a href="#" onClick="return changeVisibility(3,'responseForm')"><img src="images/reply.jpg" border=0 /></a>

EDIT: I think the issue before was that you weren't returning false, so the default action (going to #) was still occurring.

Matthew Flaschen 2010-05-14 21:13:49

Nope, still does the same thing my original code did - kind of flashes for a split second, then goes right back to the original display of messages. I've tested in Firefox 3.6.3, Chrome, and IE8.

EmmyS 2010-05-14 22:45:47

Answer 2

A:

User window.location.hash to redirect to an ID/anchor. E.g.

HTML:

<p id="youranchor">bla bla</p>

JavaScript:

window.location.hash='youranchor';

EmmyS - This code does work. Here's a complete example for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html>
  <head>
    <title>Some title</title>

    <script type="text/javascript">
      function jumpToParagraph() {
        window.location.hash='paragraphjump';
      }
    </script>
  </head>
  <body>
    <p onclick='jumpToParagraph();'>Jump to the paragraph at the end! [version 1]</p>

    <p><a href="javascript:jumpToParagraph();">Jump to the paragraph at the end! [version 2]</a></p>

    <p style="height: 1500px;">Some nonsense</p>

    <p id="paragraphjump">You made the jump</p>
  </body>
</html>

Put it into a file and test the file in your browser.

Gert G 2010-05-14 21:16:39

Same code as listed in first answer above; doesn't do anything.

EmmyS 2010-05-14 22:48:18

OK, just tried it again, and here's what's strange (or maybe not; it's been forever since I worked with CSS and javascript): if I put the onClick event in a paragraph tag, it works fine. If I try to put it in an href tag (as in a href="#" onClick='jumpToParagraph()' it doesn't work. The problem with putting it inside any tag other than an href is that unless you use an href, the browser doesn't change the cursor to a hand, so many people will thing that the thing you're supposed to click on isn't clickable, even if it should be. Any ideas on how to make it work inside an href tag?

EmmyS 2010-05-16 20:36:24

The reason <a href="#" onClick='jumpToParagraph()'> doesn't work is that by clicking, the browser uses the '#' in the href as its anchor link... and it leads to nowhere. You'll have to use javascript: in the href if you want it to work (see my edited version above).

Gert G 2010-05-17 19:32:52

Answer 3

A:

Hmm, you could try using document.body.scrollTop = document.getElementById(elementId).offsetTop; (not tested)

dhh 2010-05-14 21:17:41

Nope, doesn't appear to do anything. The code to change visibility works, but nothing else happens. No errors. I've tested in Firefox 3.6.3, Chrome, and IE8.

EmmyS 2010-05-14 22:47:33

Answer 4

A:

Hum, the following JavaScript code works like a charm:

<script type="text/javascript">
function scrollToPos() {
    var el = document.getElementById("abc");
    el.style.visibility = "visible";
    el.style.display = "block";
    el.scrollIntoView(true);
}
</script>

When clicking this link <a href="#" onclick="scrollToPos();return false;">scroll</a><br /> the following div get's gets visible and scrolls into view (tested in IE6, IE8, FF3.6.3, Google Chrome 4.1 and Opera 10.5, all on windows)

<div id="abc" style="height:100px;color:red;font-weight:bold;visibility:hidden;display:none;">
    abc
</div>

dhh 2010-05-15 13:36:39

That one doesn't work either. Obviously there's something strange going on, but I've copied your code directly (same as I did all the other answers) and even renamed my div to match yours just in case. It still just flashes briefly and unhides the form but does not jump to it. The strange thing is that Firebug isn't giving me any errors; it just isn't doing what you all say it should be doing.

EmmyS 2010-05-16 20:25:53

Answer 5

A:

OK, I finally found something that works. I've been doing what I was taught to do in the Stone Age: when using javascript calls in what needs to be a link, use

a href="#" onClick="yourFunction()"

Apparently it's the # that's killing things for me; if I just use

a href="javascript:yourFunction()"

it works correctly. This may or may not be considered good practice anymore, but it works.

EmmyS 2010-05-16 20:41:09

Your solution wasn't the same until you edited it, after I posted my answer.

EmmyS 2010-05-21 23:54:35

ansaurus

tags:

views:

answers:

How to use JS to jump to a specific place in a page? Tried scrollIntoView, not working

related questions