How to go to an specific anchor when entering the page (doesn't work)

Question

First of all, thats my current state of play: thsbrk.de.

The black boxes should be e.g. a about section. I want to achieve that if you enter my page (thsbrk.de) you directly go to my reference section (anchor '#references'). Then, if you hit the about link you will scroll up to that about section. I already tried to make it working but it doesn't. The anchor seems to be not working.

It would be awesome if someone could look at my code and offer me a solution :)

(The scroll isn't implemented yet, I only ask for the anchor problem)

EDIT: Here I've got a example how it should work: Example

They scroll. They use window.scrollTo – mplungjan Dec 19 '11 at 10:07 — mplungjan, Dec 19 '11 at 10:07

score 1 · Answer 1 · answered Dec 19 '11 at 09:19

1

Give a script tag like this in the head.Let it be the first script also.

<script>
location.href="http://thsbrk.de/#references"
</script>

From your code, you have did the same. But just try reordering the script tags it might work.

answered Dec 19 '11 at 09:19

Kris

8,680
4
39
67

score 1 · Answer 2 · edited May 23 '17 at 12:20

1

Plain JS:

window.onload=function() {
  var anchorHash = 'references';
  document.getElementsByName(anchorHash)[0].scrollIntoView();
}

Here is a jQuery example from 2009 - there may be newer ways

How do I scroll a row of a table into view (element.scrollintoView) using jQuery?

In your case this might work

$(document).ready(function() {
  var anchorHash = 'references';
  var pos = $('#'+anchorHash).position();
  window.scrollTo(0,pos.top);
});

edited May 23 '17 at 12:20

Community

1
1

answered Dec 19 '11 at 09:33

mplungjan

169,008
28
173
236

Since the element in question does not have a `name` attribute set, this will not work. – Vilx- Dec 19 '11 at 09:40
I don't want to scroll it in. I will edit an example into my post. – user1105530 Dec 19 '11 at 09:49
@Vilx: This is from his site: `
`
– mplungjan Dec 19 '11 at 09:59
Okay cool, thank you, I think I will have a try. I hope it'll work. – user1105530 Dec 19 '11 at 10:50

score 0 · Answer 3 · answered Dec 19 '11 at 09:18

0

Try this and tell me the result:

$(document).ready(function() {
   window.location.href = '#references';
});

and then modify your anchor tag like this:

<a name="references">Here</a>

answered Dec 19 '11 at 09:18

Mohammad Saberi

12,864
27
75
127

That is a poor solution. why not just scroll or set location.hash? – mplungjan Dec 19 '11 at 09:28
Because he/she does not want force the visitors to use the scroll bar. I think it can't be hard to understand. – Mohammad Saberi Dec 19 '11 at 09:34
That seems to be almost the same I've had already done, only with the document ready function missing. Will give it a try. – user1105530 Dec 19 '11 at 09:47
Don't forget that you need to have enough page height to be able to navigate users to wherever you want. Otherwise, your anchor may not to be at the top of the page. – Mohammad Saberi Dec 19 '11 at 09:55

How to go to an specific anchor when entering the page (doesn't work)

3 Answers3