Scrollable Table: Jump to anchor

Posted on 2008-11-11
Last Modified: 2012-06-27
I plan to use the code on the following page to create a table where the content is scrollable but the header and footer are static.

However, I would like to create one or more links to anchors (or rows with ids) within the table which would allow users to 'jump' to a specific row - ie the table would scroll so that the required row is shown at the top of the scrollable area.

I'm guessing that this can't be done with HTML and CSS, so what would I need to do in terms of javascript?

Question by:Garve
    LVL 15

    Accepted Solution

    I am not sure the section technique is usable in this case, but worth you a try.

    This link points to a certain section in the same html and allow jumping when clicking the link
    <a href="#C4">Go to cell 4</a>
    <h2><a name="C4">cell 4</a></h2>
    <p>This chapter explains ba bla bla</p>

    Open in new window

    LVL 7

    Author Comment

    No, that would work if the table wasn't scrollable, but not here.

    I guess what I'm doing might be better explained like this.

    It's equivalent to having a div of a specific height set to overflow:auto; where I want to be able to scroll the contents of the div to a specific point.

    Using an anchor as you suggest would scroll the whole page to a specific point, not just the div.
    LVL 29

    Assisted Solution

    by:David H.H.Lee
    Hi Garve,
    quincydude's solution is work for your preferred anchor that set in any places in your web site.
    Here i modify one of the cell that named "cell1" inside the scrollable table that provided in link. It is still working fine. You need to set the anchor's id as you need first. Please provide more details you trying to archieve something else there.
    LVL 7

    Author Comment

    Thanks - I had placed my anchor like this

    <a name="jump"></a>

    but if placed within the cell it works.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 Mobile App Development with PhoneGap

    PhoneGap can help you leverage your already existing HTML5, JavaScript, and CSS skills in order to create and deploy cross-platform mobile apps.This program comprehensively covers HTML5 mobile app development from top to bottom.

    In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
    In my daily work (mainly using, I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now