4

I have a scrolling division which contains a list of hotels, grouped alphabetically. Above this division, I have an alphabetical index of links, which when clicked, I would like the corresponding alphabetical item to scroll upwards, within the division.

I've spent about an hour scouring the web and trying various techniques, and haven't found anything that does what I'm looking for, or at least something I can understand; I'm no jQuery genius.

Any assistance would be much appreciated!

nickb
  • 59,313
  • 13
  • 108
  • 143
Wayne Smallman
  • 1,690
  • 11
  • 34
  • 56
  • 1
    Show us what you have so far, and what you are trying to accomplish. – Brad Nov 16 '11 at 21:55
  • @Brad the answer below contains (broadly) the code I'm using, with the exception of a ul instead of a span for the index, and a h3 instead of div for the index item in the list. – Wayne Smallman Nov 17 '11 at 09:09

1 Answers1

17

What you want is element.scrollIntoView(); this will scroll the browser window/div to make an element visible on the page.

An example of this: fiddle link

Update: Added a more complete dynamic example.

CSS

#container {
    overflow: auto;
    height: 50px;
}

.scrollto {
    color: blue;
    text-decoration: underline;  
    cursor: pointer;
}

HTML

<span class="scrollto">a</span>  <span class="scrollto">e</span> <span class="scrollto">i</span>

<div id='container'>
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
    <div id="e">e</div>
    <div id="f">f</div>
    <div id="g">g</div>
    <div id="h">h</div>
    <div id="i">i</div>
</div>

JS 

$('.scrollto').click(function() {
   $('#' + $(this).text()).get(0).scrollIntoView();
   // or $('#' + $(this).text())[0].scrollIntoView();
});

Basically in this example I created a small overflowed div causing it to have a scrollbar.

I then use id anchors on div tags inside of it to label the different areas in it. I have a span outside the div to auto scroll to a certain anchor point inside the overflowed div when clicked.

@Wayne Smallman: As per the html code in your comment, this is what you would use

$('div#index ul li a').click(function() {
    $($(this).attr('href')).get(0).scrollIntoView();
});

Fiddle Demo

Jeff Wilbert
  • 4,400
  • 1
  • 20
  • 35
  • Hi Jeff, and thanks for the suggestion. I'm already using a containing division called "preview" which has the same properties as "container". I've looked at the Fiddle, which works, but when applied the application, it doesn't work. – Wayne Smallman Nov 17 '11 at 09:00
  • You'll need to provide more info and example code for anyone to help if you want a working example based on your page layout and specs. If your using `ul` instead of `span` change the first part to `
    • a
    • b
    `. if your anchors inside the container/preview are `h3` tags then what attribute are you using to identify that section? `

    `? If you do it that way then things should work without any change. If you do something like `

    ` then you need to use `$('#section-' + $(this).text()).get(0).scrollIntoView();`

     – Jeff Wilbert Nov 17 '11 at 13:11
  • Okay, the list:
    And an anchor:

    A

    And that's it. If you need more, let me know.     – Wayne Smallman Nov 19 '11 at 21:44
  • Wayne, based on the code you provided in your comment I updated my question and added the solution for you to use at the bottom. If this answer solved your question, please mark the question as answered by checking the box next to this answer. This helps build up your own reputation which will only benefit you and the community by letting others know what solved your problem. Thank you. – Jeff Wilbert Nov 20 '11 at 02:02
  • Jeff, thanks for the reply! And apologies for my own late reply. I finally got this working in a way very similar to your own example. Thanks again! – Wayne Smallman Mar 06 '12 at 14:05