Question

I’m using the simplest HTML ‘overflow: scroll’ type mark-up for creating a scroll bar within multiple div containers to display text and image content within the scroll. I have it setup within tabbed content areas, that are pulled together calling divs within the tab links. I’m trying to figure how, if possible, that when a user browses to a different tab and then back – to allow that scroll bar to reload to the top, ready to scroll downward again.

Pretty much, the mark-up;

        <li class="newtab">

<!--JS Rollover Button for Tab-->

<a href=#tab13  onMouseOver= "if (document.images) document.tab_recordedattack_off1.src= 'img/Btns/tab_recordedattack_on1.png';" onMouseOut= "if (document.images) document.tab_recordedattack_off1.src= 'img/Btns/tab_recordedattack_off1.png';"><img src="img/Btns/tab_recordedattack_off1.png" name=tab_recordedattack_off1 border=0></a>

<!--End JS Rollover Button for Tab-->

        </li>

    </ul>

    <div class="tab_container">

        <div id="tab13" class="tab_content">

          <div class="tabright">

<div style="border:0px solid black;width:500px;height:400px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;">

I’ve been thinking about trying to set a simple html anchor point at the top of scroll areas and somehow call to it within the tab links – but can’t figure out how to do that.

Any suggestions? – How can I point the tabbed links to the content and the anchor point?

Answer 1

You can use jQuery to reset the scroll: http://jsfiddle.net/Cqhch/

$("button").click(function(){
        $("div:first").scrollTop(0);
    });