1

I can't find a solid answer on this, and trial and error is getting me nowhere.

I have am generating a dynamic PHP page with variables in my URL, so my URL looks like:

http://www.mypage.com/myfile.php?l=1&d=1&c=1

(works)

I'd like to also add an anchor to this, such as:

http://www.mypage.com/myfile.php?l=1&d=1&c=1#anchor1
(Does not jump to the anchor at the end)

The anchor is targeting a div such as:

<a href = "http://www.mypage.com/myfile.php?l=1&d=1&c=1#anchor1">Some link</a>
<div id = "anchor1"></div>

Is this possible?

5
  • 1
    What does Does not work mean? And you should always include the protocol at the beginning of your links (http://, https:// or //) Commented Aug 13, 2013 at 23:59
  • The page sits still, and does not jump to the anchor. Commented Aug 13, 2013 at 23:59
  • Thanks. Just taking short cuts to post here, http:// is actually in there. I'll edit to match. Commented Aug 14, 2013 at 0:01
  • Are you sure there's an element with id="anchor1" in that page? And make sure that it isn't created with javascript after page loads Commented Aug 14, 2013 at 0:02
  • The id is also dynamically generated, but yes, I've checked to make sure that it is named correctly. Commented Aug 14, 2013 at 0:05

3 Answers 3

2

This should work better

<a href="http://www.mypage.com/myfile.php?l=1&d=1&c=1#anchor1">Some link</a>
<div>
    <a name="anchor1"></a>
</div>

Note that the right way of doing it depends on what doctype you are using. You can read more about this for html5 here and for html 4.01 here

Sign up to request clarification or add additional context in comments.

5 Comments

I don't think the name should have # in it?
Just as a note: The & in URLs should be encoded. http://www.mypage.com/myfile.php?l=1&amp;d=1&amp;c=1#anchor1
Leave HTML 4.01 behind, and move towards HTML5! The name attribute is obsolete in HTML5, id should be used instead
@Oriol It might be obsolete but it's still valid. It will check for name if there is no element in the DOM that has an ID exactly equal to fragid.
I'm actually using html5, I should have clarified that, however, still having no luck with the "id"
0

I guess the problem is that the id is added dynamically.

Then, you can refresh the hash AFTER adding the id and appending your element to the document

var h = location.hash;
location.hash = '';
location.hash = h;

Demo: http://jsfiddle.net/wpMDj/1/show/#anchor

Code: http://jsfiddle.net/wpMDj/1/


Alternatively, you can use scrollIntoView:

document.getElementById(location.hash.substring(1)).scrollIntoView(true);

But to avoid errors you need some ifs:

var hash = location.hash.substring(1);
if(hash){
    var el = document.getElementById(hash);
    if(el && el.scrollIntoView){
        el.scrollIntoView(true);
    }
}

Demo: http://jsfiddle.net/wpMDj/3/show/#anchor

Code: http://jsfiddle.net/wpMDj/3/

1 Comment

I've found that changing the location.hash when dealing with dynamically generated content doesn't always work well. window.setTimeout(function() {document.getElementByid("hash1").scrollIntoView(true)}, 1); works reliably for me.
0

Some Browsers, will not automatically target your id, based on the URL hash. You may consider using JavaScript.

var doc = document;
function E(e){
  return doc.getElementById(e);
}
function offset(element){
  var x = 0, y = 0, e = element;
  while(e && !isNaN(e.offsetLeft) && !isNaN(e.offsetTop)){
    x += e.offsetLeft - e.scrollLeft;
    y += e.offsetTop - e.scrollTop;
    e = e.offsetParent;
  }
  return {left: x, top: y};
}
function YourSolution(listId){
  var parentId = E(listId), pcn = parentId.childNodes;
  for(var i=0,l=pcn.length; i<l; i++){
    if(pcn[i].nodeType === 1){
      var ac = pcn[i].childNodes;
      for(var n=0,m=ac.length; n<m; n++){
        var an = ac[n];
        if(an.nodeType === 1){
          an.onclick = function(){
            var el = offset(this);
            scrollTo(el.left, el.top);
          }
        }
      }
    }
  }
}

Put the above on an external JavaScript page called scroll.js. Now put the following code at the bottom of your body:

  <script type='text/javascript' src='scroll.js'></script>
  <script type='text/javascript'>
    YourSolution('listId');
  </script>
</body>
</html>

2 Comments

I'm using chrome, but if it is possible that it wouldn't work in other scenarios, could you please provide an example of how to accomplish w/ JavaScript?
I'm not sure I understand how to implement this. The href is being put dynamically on a list item in a for each loop which I'm attempting to anchor to a div that is later produced dynamically as well. Can you please explain how this should be used? I'm not very familiar with implementing JavaScript

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.