1

I wish to jump to the selected hash whenever my URL contains a #.

The # are dynamically created and inserted into header($location);. Afterwards the new URL loads like this: www.example.com?p=1#key-1, however it wont go to the selected # on the page. How can I do this?

I looked into javascript window.location.hash, however I couldn't figure out how to use it properly.

UPDATE: The # in the url works when I manually type #sek-31 into the adress bar. However, when I reload the same URL, I get thrown back to the top of the page.

UPDATE TWO: enter image description here

UPDATE THREE:

Its working in the following browsers:

  • Windows version of Safari
  • Firefox
  • Edge
Community
  • 1
  • 1
Gjert
  • 931
  • 1
  • 15
  • 43
  • 2
    This might be of help: http://stackoverflow.com/questions/3163615/how-to-scroll-html-page-to-given-anchor-using-jquery-or-javascript – Antti29 Dec 01 '15 at 12:58
  • How do you insert hash exactly? Are you sure there is element with ID `key-1` at time you insert hash? – A. Wolff Dec 01 '15 at 13:04
  • @A. Wolff , I do it like this. `$location = "Location: planner_show.php?"; $location .= "m=" . $msgId . "&p=" . $save_plan_id; header($location); die;` – Gjert Dec 01 '15 at 13:18

1 Answers1

0

If you go to www.example.com?p=1#key-1 the browser automatically will scroll to the element with id key-1. So, just add a id attribute.

https://developer.mozilla.org/en/docs/Web/HTML/Element/a#attr-href

(This url is already demo for this. It end with #attr-href when you click on it you will go directly to the section #attr-href)

http://output.jsbin.com/bajiqu#res Notice that I put #res in the url so the browser will scroll to the #res paragraph.

Mosh Feu
  • 24,625
  • 12
  • 74
  • 111
  • Doesn't work... I have the address: https://example.com/planner_show.php?p=1#sek-34, and a div with the id=sek-34 – Gjert Dec 01 '15 at 13:20
  • Did you added `id` attribute? Did you try to go to the `Mozila` page? If so, have you noticed that you are not in the top of the page but scrolling directly to the `attr-href` section? Do you have a public URL of your site? – Mosh Feu Dec 01 '15 at 13:24
  • I have ID on my div. This id is `sek-34`. I noticed that, however, it's not the same reaction on my page. The page is a closed page. Is there any other function that could force #top? – Gjert Dec 01 '15 at 13:27
  • Maybe you have a script in your site that "blocks" the scrolling. I can't know for sure until I can see your website. Try to create a fiddle that show this problem. I've added a fiddle to my answer so you can check this. – Mosh Feu Dec 01 '15 at 13:39
  • Or an `` without `href` and with the desired name. – Ismael Miguel Dec 01 '15 at 13:43
  • Weird. Can't seem to identify it. I have textareas and I store some information. I go to the store php file, and get redirected back unto the page with all the textareas. I then want it to select the div with, lets say, sek-34... No reactions in the URL :/ – Gjert Dec 01 '15 at 14:02
  • 1
    If you try to get the `www.example.com?p=1#key-1` URL directly in the browser (not via the server redirectopn). Is it work? – Mosh Feu Dec 01 '15 at 14:17
  • If I edit the webadress from lets say: `www.example.com?p=1` to `www.example.com?p=1#key-1` it works. However, if I reload the same page I just entered by hitting refresh, it doesnt. – Gjert Dec 01 '15 at 14:19
  • OK, It's seems that you have a script that block the scroll on page load. If you do so after the page was loaded the scroll works. Try to run the page without `JavaScript`. http://stackoverflow.com/questions/13405383/how-to-disable-javascript-in-chrome-developer-tools – Mosh Feu Dec 01 '15 at 14:23
  • When I turn off JavaScript I dont get the value after # to display in the address bar... – Gjert Dec 01 '15 at 14:29
  • I don't understand. If you change from `www.example.com?p=1` to `www.example.com?p=1#key-1`(nothing happens) then, reload the page, You still have the `#key-1` in your address bar, isn't? – Mosh Feu Dec 01 '15 at 14:35
  • When I manually change the adressbar, it works. However, when I reload the same URL after having it work the first time. It doesn't. The `#key-1` is still in the URL. With redirect it doesn't work either. – Gjert Dec 01 '15 at 14:45
  • Well, I don't know what to say. I'm sure that if I can see the page I will figure it out. So, when you could supply a public URL I will happy to take a look and help. – Mosh Feu Dec 01 '15 at 14:48
  • `Found` where? in your project? Or just mention a plugin? I just now noticed that the images in your question so different. Why? Where the menu in image 1 and where the content in image 2? – Mosh Feu Dec 01 '15 at 15:03
  • I pinpointed the problem to be in the chrome browser. Works perfect in Mozilla and the windows version of Safari. Edit: Also works for Edge. – Gjert Dec 04 '15 at 07:53