How to scroll to an anchor in a div

Dev Shed Forums Sponsor:

October 20th, 2012, 11:23 AM

colpaarm

300lb Bench!

Join Date: Aug 2001

Location: New York

Posts: 2,343

Time spent in forums: 5 Days 10 h 50 m 4 sec
Reputation Power: 60

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?

__________________
Correspondence chess
nothingbutchess.com

Last edited by colpaarm : October 20th, 2012 at 11:30 AM.

October 21st, 2012, 08:27 PM

colpaarm

300lb Bench!

Join Date: Aug 2001

Location: New York

Posts: 2,343

Time spent in forums: 5 Days 10 h 50 m 4 sec
Reputation Power: 60

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.

October 21st, 2012, 09:25 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 605

Time spent in forums: 1 Week 1 Day 16 h 18 m 24 sec
Reputation Power: 69

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.

October 22nd, 2012, 10:48 AM

colpaarm

300lb Bench!

Join Date: Aug 2001

Location: New York

Posts: 2,343

Time spent in forums: 5 Days 10 h 50 m 4 sec
Reputation Power: 60

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.

October 24th, 2012, 07:59 PM

colpaarm

300lb Bench!

Join Date: Aug 2001

Location: New York

Posts: 2,343

Time spent in forums: 5 Days 10 h 50 m 4 sec
Reputation Power: 60

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.

October 24th, 2012, 08:11 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 605

Time spent in forums: 1 Week 1 Day 16 h 18 m 24 sec
Reputation Power: 69

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.

How to scroll to an anchor in a div

Developer Shed Advertisers and Affiliates