Question

I am trying to create div that contains scrollable content. To do this I created a parent div that hides overflow content and I have two divs that allow users to scroll through the child content. The problem is that my two divs that allow users to scroll are moving when they are clicked. I would like their position to stay fixed within the parent div.

If that does not make sense please take a look at the jsFiddle below. When you click the text that says “Down!” you will see everything on the page (including the “Down!” text) move down. I would like “Down!” to stay where it is.

http://jsfiddle.net/4ecA7/

Here is what I have tried so far:

<div id="container">
    <div id="up">UP!</div>
    <div id="down">DOWN!</div>
    <div id="content">
        Scrolling content       
    </div>
</div>

Css:

#container
{
 height:200px;
 width:400px;   
 position:relative;
 overflow:hidden;
}

#up
{
    position:absolute;
    top:3px;
    left:3px;
}
#down
{
    position:absolute;
    bottom:3px;
    left:3px;
}
#content
{
 left:80px;   
 position:relative;
}

jQuery:

    $(document).ready(function () {

        $("#up").click(function () {
            $("#container").animate({ scrollTop: $("#container").position().top - 40 }, 500);
            //$("#container").position().top - 40.scrollTop();
        });

        $("#down").click(function () {
            $("#container").animate({ scrollTop: $("#container").position().top + 40 }, 500);
        });
   });

Answer 1

I’ve constructed a simple jsFiddle to show my (new) way. I think I succeeded rather well.

The point is to have 2 divs outside the scrolling content, which are in this case position: absolute; for the sake of looks alone. which control the content but not scroll with it.