#1
  1. 300lb Bench!
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Aug 2001
    Location
    New York
    Posts
    2,350
    Rep Power
    62

    How to scroll to an anchor in a div


    So here's my problem. I have a div with overflow set to auto and there's a bunch of stuff in there.

    Code:
    <div id="oldgames_movelist">
                  <table id="tbl_oldgames_movelist" cellspacing="0">
                    <tr>
                      <th>
                        Move #
                      </th>
                      <th id="th_movelist_white" style='font-weight:bold; '>
                        White
                      </th>
                      <th id="th_movelist_black">
                        Black
                      </th>
                    </tr>
                                        <tr>
                          <td id="td_movenum_1">
                            <a name="ank_move_num_1" />
                            1                      </td>
                          <td id="td_movenum_white_1">
                            f2&mdash;f4                      </td>
                          <td id="td_movenum_black_1">
                            d7&mdash;d5                      </td>
                        </tr>
                                        <tr>
                          <td id="td_movenum_2">
                            <a name="ank_move_num_2" />
                            2                      </td>
                          <td id="td_movenum_white_2">
                            g1&mdash;f3                      </td>
                          <td id="td_movenum_black_2">
                            b8&mdash;c6                      </td>
                        </tr>
    ...
    </div>
    You can see an example here .
    So I have a div that shows the moves of a chess game and buttons on the top that allow one to go backwards and forwards through that game. Now the thing is, when users click on the buttons, I want the div to scroll to the current move.

    So what I've done to accomplish this is use anchor tags

    <a name="ank_move_num_1" />

    , then when the user clicks on the buttons, it jumps to the appropriate anchor tag, depending on the move with the following:

    window.location = String(window.location).replace(/\#.*$/, "") + "#ank_move_num_" + iMaxMoveNo;

    Ignore the regex part. The important part is that I do a window.location call and put the anchor tag in the call. Now the problem is that I'm making updates to this page and the page will now be longer. The issue is that when it scrolls the div, it also makes the page jump. If the page is really long (which it will be with these new updates I'm making), it jumps so that the buttons are no longer in the browser window. It's a UI mess. Is there a way to scroll to an anchor within a div without making the entire page scroll too?

    I've tried

    $("#oldgames_movelist")[0].scrollTop += (some number);

    but that requires a ton of work. The reason is the move list can either go forwards or reversed, based on how the user has things set. It would be much easier if I could just scroll to an anchor (or something) within the div without making the whole page scroll as well. Any thoughts?
    Last edited by colpaarm; October 20th, 2012 at 11:30 AM.
    Correspondence chess
    nothingbutchess.com
  2. #2
  3. 300lb Bench!
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Aug 2001
    Location
    New York
    Posts
    2,350
    Rep Power
    62
    Ok, after a day of banging my head and not getting any results, I solved my problem via a jQuery plugin. Hopefully this will save someone a few hours (or days!). First, I'll post an example

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Scroll test</title>
        <link href="/css/reset.css" rel="stylesheet" type="text/css" />
        <script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="/js/jquery.scrollTo-1.4.3.1-min.js" type="text/javascript"></script>
        <script type="text/javascript">
        </script>
        <style type="text/css">
          #slider {
            width:250px;
            height:250px;
            overflow:auto;
            border:1px solid #000;
          }
        </style>
      </head>
      <body>
        <div id="slider">
          <a id="one" />
            <h1>Header #1</h1>
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.
            </p>      
          <br />
          <a id="two" />
            <h1>Header #2</h1>
            <p> 
              Oh say can you see, by the dawn's early light, what so proudly we hailed, at the twilight's last gleaming...
              Oh say can you see, by the dawn's early light, what so proudly we hailed, at the twilight's last gleaming...
              Oh say can you see, by the dawn's early light, what so proudly we hailed, at the twilight's last gleaming...
            </p>
          <br />
          <a id="three" />
            <h1>Header #3</h1>
            <p>
              This is a test of the emergency broadcast system. This is only a test.
              This is a test of the emergency broadcast system. This is only a test.
              This is a test of the emergency broadcast system. This is only a test.
            </p>
        </div>
        <a href="javascript:some_func('one');">Scroll to #1</a><br />
        <a href="javascript:some_func('two');">Scroll to #2</a><br />
        <a href="javascript:some_func('three');">Scroll to #3</a><br />
        <script type="text/javascript">
          function some_func(id) {
            $('#slider').scrollTo( $('#' + id), 800 );
          }
        </script>
      </body>
    </html>
    I'm using jQuery 1.7.2, but you can use whatever version is the current one, I guess. The second jQuery call is to the plugin that saved the day for me. However, I actually had to search a bit to find the link to download this, as the jquery plugin page seems to be going through some issues at the moment. Anyway, you can find it on the author's blog page. I downloaded the minified version since the file size is smaller, but I tested with both versions with no problems. That 800 number, btw, is the speed of the scrolling. The lower the number, the faster the scrolling. The author's demo page shows that this plugin is very flexible when it comes to scrolling, so I'm definitely not taking advantage of everything it can do, but it worked perfectly for my purposes.

    I landed up donating $5 to the guy's paypal account! Anyway, I've seen this problem mentioned a ton via google searches and I didn't see a clean answer, so hopefully this helps someone in the future.
    Last edited by colpaarm; October 21st, 2012 at 08:30 PM.
    Correspondence chess
    nothingbutchess.com
  4. #3
  5. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    Here's a Non-jQuery way to do this; it's a very basic example, but it will do the trick too.

    Code:
    <style>
    #oldgames_movelist_wrapper {
    padding:10px;
    border:solid 1px black;
    height:auto;
    width:100px;
    overflow:hidden;
    }
    #oldgames_movelist {
    font-size:16px;
    height:100px;
    width:100px;
    overflow:hidden;
    }
    #oldgames_movelist div {
    height:16px;
    overflow:hidden;
    }
    </style>
    
    <script>
    
    var fontSize = 16;
    
    function moveTo(go2location)
    {
    var go2 = fontSize * parseInt(go2location-1);
    document.getElementById("oldgames_movelist").scrollTop = go2;
    document.getElementById("oldgames_movelist").getElementsByTagName("div")[go2location-1].style.color="red"; // signifies that move has been selected
    }
    
    </script>
    
    <div id="oldgames_movelist_wrapper">
    <div id="oldgames_movelist">
    <div>Move 1...</div>
    <div>Move 2...</div>
    <div>Move 3...</div>
    <div>Move 4...</div>
    <div>Move 5...</div>
    <div>Move 6...</div>
    <div>Move 7...</div>
    <div>Move 8...</div>
    <div>Move 9...</div>
    <div>Move 10...</div>
    <div>Move 11...</div>
    <div>Move 12...</div>
    <div>Move 13...</div>
    <div>Move 14...</div>
    <div>Move 15...</div>
    <div>Move 16...</div>
    <div>Move 17...</div>
    <div>Move 18...</div>
    <div>Move 19...</div>
    <div>Move 20...</div>
    <div>Move 21...</div>
    <div>Move 22...</div>
    <div>Move 23...</div>
    <div>Move 24...</div>
    <div>Move 25...</div>
    <div>Move 26...</div>
    <div>Move 27...</div>
    <div>Move 28...</div>
    <div>Move 29...</div>
    <div>Move 30...</div>
    </div>
    </div>
    
    <br/>
    <br/>
    
    <input type="button" value="Go To Location" onclick="moveTo('10')"/>
    Last edited by web_loone08; October 21st, 2012 at 09:30 PM.
  6. #4
  7. 300lb Bench!
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Aug 2001
    Location
    New York
    Posts
    2,350
    Rep Power
    62
    web_loone08, I'm at work right now, but I'll play with your method later on and see if I can make it work as well.
    Correspondence chess
    nothingbutchess.com
  8. #5
  9. 300lb Bench!
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Aug 2001
    Location
    New York
    Posts
    2,350
    Rep Power
    62
    web_loone08, ok, I just had a chance to look at the way you do it and it works pretty well. It's pretty smart. You're scrolling by the height of the word * the number of rows. You don't have the options to scroll slowly, scroll fast and the like, but if I saw your solution I would have used it. Well considering the countless threads I saw about this topic that had no solution, I'm sure many will be thankful these solutions are here.
    Correspondence chess
    nothingbutchess.com
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    Yeah, my example is quit basic compared to jQuery; but they are using an entire library... lol. Yeah I agree; maybe both of our examples will help people in the future.

IMN logo majestic logo threadwatch logo seochat tools logo