This is a follow-up to my earlier question (#27928418).
The attachment to this question is a screen capture of a web page I am working on which contains an area where a list of songs is displayed. Also displayed is the music notation of a song which the user has selected. The music notation is in an iframe. Clicking on a song title loads its notation into the frame without reloading the parent page. The HTML source code is also attached. This page is the result of a previous page where the song list is displayed. When the user selects a song title, it links to this notation page where the song list is redisplayed alongside the musical notation of the selected song.
The song list can vary in length from one song to several hundred titles. Once the length of the list exceeds the height of the space allotted to it, the right scroll bar appears, allowing the user to scroll down to view additional songs on the list. The problem is the user may have selected a song far down the list. When the page loads, by default, the topmost portion of the list is displayed.
When this notation page loads, I would like the list to be scrolled to the position where the selected song title is at the top of the displayed titles. It should still be in its correct position relative to its neighboring song titles, but should appear at the top of the visible portion of the list, just as if it were scrolled to that position. The user could then scroll up or down from there to review additional titles. My client is adamant that I not use a paging system, so I must retain the scroll format. Also, the client likes the look as it is, so any solution should contain no additional controls (or at least minimize them).
The information about each song is contained within a div having and id of “key” plus the number equal to its position in the array of songs in the list, e.g. key23 is the id for the 24th song in the list.
Is there a way to do this?