SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Alternative to anchor URL?

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

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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">
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there not some handy script out there that does the same thing?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Macchiato View Post
    Is there not some handy script out there that does the same thing?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Macchiato View Post
    I always use the method you describe, but on one page it messes the page up when I click the link.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.
    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:

    Code JavaScript:
    <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. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Macchiato View Post
    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"?
    You will have less work (always a bonus) and greater success by setting location.hash to the identifier.

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    <script type="text/javascript">
    function scrollWindow()
      {
      location.hash = '#goHere'
      }
    </script>

    ...unfortunately messes the page up the same way

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Macchiato View Post
    ...unfortunately messes the page up the same way
    Do you find that the alternative has any similar issues?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    I referenced the clientTop documentation for you earlier on.

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

    Code javascript:
    var top = document.getElementById('goHere').clientTop;
    window.scrollTo(0, top);
    Last edited by paul_wilkins; Mar 7, 2011 at 08:03.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You mean like this?:

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

    This doesn't work though.
    Last edited by descarte; Mar 7, 2011 at 09:28.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Macchiato View Post
    This doesn't work though.
    What do you mean by "doesn't work"?

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

    Please help us to help you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Does it not work in that your computer blows a gasket?
    lol No, it actually does nothing at all

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've made a test html file, but it still does nothing

    Code HTML4Strict:
    <!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. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You should be using clientTop instead of scrollTop
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Seeing what you are trying to attempt in your test code, you may wish to try offsetTop instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    offsetTop did the trick, thanks Paul!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •