Grow your CSS skills. Land your dream job.

scroll to element

  • # February 24, 2013 at 8:38 am

    Some guidance please:
    I have two panels on a page. In the left panel is a list of events covering several years. In the right panel is a review of that event.

    The list of events is arranged as a accordion list of years so that the visitor can expand a previous year and click on an event.

    Both of these panels have their own scroll bars are are overflow:auto

    When the visitor clicks on the event the page for that event is loaded, which is essentially the same page, but with the event report showing in the right hand panel.

    The problem with this of course is that the open/close state of the accordion is not retained and the user is forced to open the accordion again and scroll down to select the next event.

    I can pass the ‘current’ event as a class against the event list, and can open the accordion on the right section, but how do I scroll the panel to the event in question?

    # February 24, 2013 at 8:51 am

    You could give whatever element holds the event description a unique `id` and attach this to the `href` of the links. That way, when the event link is clicked, the browser will automatically jump to whatever element it links to.

    # February 24, 2013 at 1:44 pm

    Thanks for the feedback Tom. What you say might be fine, but I would have to add an anchor to each link? ie, the panel on the left is a list of links like /shows/245 and this would have to become /shows/245#245 ?

    I have a javascript solution now. I expand the section that contains the current event, and then get the .position().top value for the ‘current’ link then pass that to $(‘container’).ScrollTop. It seems to work fine.

    The other solution I’m considering is to load the event details panel with ajax so that the page is not reloaded and the accordion does not have to be reopened and scrolled.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".