Alternative to anchor URL?

JavaScript
1

Is there an other way to link to an element on the same page without using anchor URLs?

2

You can link to any element in a web page that has an id.

<div id=“linktohere”>
<p id=“orhere”>
<img id=“orevenhere”>
<h3 id=“heretoo”>
<a id=“and even an anchor” href=“#linktohere”>

3

I always use the method you describe, but on one page it messes the page up when I click the link. I’ve read an article somewhere that had an alternative method of linking to an element on the same page, but I cannot find the article anymore.

Is there a way to use a link without #linktothere and still take you to an certain element on the same page?

4

Is there not some handy script out there that does the same thing?

5

The element identifier is the best way to define a target object.

We can only currently guess at your motivation, but if you don’t want to mess up the URL you can use the window.scrollTo command to scroll to a certain location on the page.

I believe that the clientTop property of an element will give you the top location of an element.

6

Instead of just giving up on the existing technique, let’s look at what you’re doing there and try to correct the reason why it messes up in the first place.

7

That was my first idea also, but this would take to much time to figure out cause this page is build out of 50 or more different php scripts. I would have to search each of these 50 scripts (some over 1000 lines long) and I won’t even know what I’m looking for…

I use the following script now:


<script type="text/javascript">
function scrollWindow()
  {
  window.scrollTo(100,500)
  }
</script>

This works, but I was actually interested in using the clientTop property.
How can I use clientTop to go to the top location of an Div element with the id=“goHere”?

8

You will have less work (always a bonus) and greater success by setting location.hash to the identifier.


location.hash = '#goHere';

If that doesn’t work, then other more complicated ways aren’t likely to work either, which brings us back to investigating the actual cause of the problem.

Try to get it working first though.

9 

<script type="text/javascript">
function scrollWindow()
  {
  location.hash = '#goHere'
  }
</script>

…unfortunately messes the page up the same way :frowning:

10

Do you find that the alternative has any similar issues?

11

I referenced the clientTop documentation for you earlier on.

Since the identifier is “goHere”, you could use something like this:


var top = document.getElementById('goHere').clientTop;
window.scrollTo(0, top);
12

You mean like this?:


<script type="text/javascript">
function scrollWindow()
  {
  var top = document.getElementById('goHere').scrollTop;
  window.scrollTo(0, top);
  }
</script>

This doesn’t work though.

13

What do you mean by “doesn’t work”?

Does is not work in that it does nothing? :frowning:
Does it not work in that the same problem occurs? :nono:
Does it not work in that something different happens? :confused:
Does it not work in that your computer blows a gasket? :eek:

Please help us to help you.

14

lol :lol: No, it actually does nothing at all

15

The top variable might be getting clobbered by something else.

Commonly el is used to designate an element of some kind.
Try using el instead of top instead.

Failing that, show us what you’ve got.

16

I’ve made a test html file, but it still does nothing :frowning:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript">
function scrollWindow()
  {
  var top = document.getElementById('goHere').scrollTop;
  window.scrollTo(0, top);
  }
</script>
</head>


<body>

<input type="button" onclick="scrollWindow()" value="Scroll" />

<div style="height:1000px;"></div>

<div id="goHere" style="height:50px;width:100px;background-color:#09C"></div>

</body>
</html>
17

You should be using clientTop instead of scrollTop

18

Seeing what you are trying to attempt in your test code, you may wish to try offsetTop instead.

19

offsetTop did the trick, thanks Paul! :smiley: