jQuery Forum

.pagecontainer {
overflow-y:auto;
overflow-x:hidden;
width:80%;
height:450px;
margin: 0 auto;
}
.pagecontainer>div{
display: none;
position:relative;
}

<!--fade and show windows-->
<script type="text/javascript">

    $(document).ready(function() {

         $('.link').on('click', function(e){
             displayNone();
             $(this.getAttribute("href")).fadeIn();
         }

         function displayNone() {
             $('.pagecontainer>div').fadeOut(0);
         }

    });

</script>

<!--Scroll window for anchor links-->
<script type="text/javascript">
    $(document).ready(function() {
        $('.enablescroll').localScroll({
           target:'.pagecontainer', /*scroll within this parent div*/
           duration:500
        });

    });
</script>

<div class="pagecontainer">

    <div id="page1">

        <div class="sidelinks enablescroll">
            <a href="#main">Back to main</a>
            <p>
            <a href="#page1a">Page 1 A</a>
            <p>
            <a href="#page1b">Page 1 B</a>
            <p>
        </div>

        <div class="content">

            <div id="page1a">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vestibulum arcu vitae sodales. Nunc quam velit, tempus a vestibulum in, scelerisque in ipsum. Nam pretium imperdiet elementum. Nam nec sem magna, ut tempus augue. Donec vitae ipsum elit. Phasellus imperdiet arcu nec libero elementum eget volutpat purus dictum. Quisque congue porta sapien, vitae laoreet eros volutpat nec. Mauris sed leo nec justo molestie cursus ut vitae ipsum. Vestibulum ante odio, egestas elementum ullamcorper sit amet, tristique in lorem. 
            </div>

            <div id="page1b">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vestibulum arcu vitae sodales. Nunc quam velit, tempus a vestibulum in, scelerisque in ipsum. Nam pretium imperdiet elementum. Nam nec sem magna, ut tempus augue. Donec vitae ipsum elit. Phasellus imperdiet arcu nec libero elementum eget volutpat purus dictum. Quisque congue porta sapien, vitae laoreet eros volutpat nec. Mauris sed leo nec justo molestie cursus ut vitae ipsum. Vestibulum ante odio, egestas elementum ullamcorper sit amet, tristique in lorem. 
            </div>

        </div>
        <br>
        <br>
        <br>
    </div>  

    <div id="page2">

        <div class="sidelinks enablescroll">
            <a href="#main">Back to main</a>
            <p>
            <a href="#page2a">Page 2 A</a>
            <p>
            <a href="#page2b">Page 2 B</a>
            <p>
        </div>

        <div class="content">

            <div id="page2a">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vestibulum arcu vitae sodales. Nunc quam velit, tempus a vestibulum in, scelerisque in ipsum. Nam pretium imperdiet elementum. Nam nec sem magna, ut tempus augue. Donec vitae ipsum elit. Phasellus imperdiet arcu nec libero elementum eget volutpat purus dictum. Quisque congue porta sapien, vitae laoreet eros volutpat nec. Mauris sed leo nec justo molestie cursus ut vitae ipsum. Vestibulum ante odio, egestas elementum ullamcorper sit amet, tristique in lorem. 
            </div>

            <div id="page2b">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vestibulum arcu vitae sodales. Nunc quam velit, tempus a vestibulum in, scelerisque in ipsum. Nam pretium imperdiet elementum. Nam nec sem magna, ut tempus augue. Donec vitae ipsum elit. Phasellus imperdiet arcu nec libero elementum eget volutpat purus dictum. Quisque congue porta sapien, vitae laoreet eros volutpat nec. Mauris sed leo nec justo molestie cursus ut vitae ipsum. Vestibulum ante odio, egestas elementum ullamcorper sit amet, tristique in lorem. 
            </div>

        </div>
        <br>
        <br>
        <br>
    </div>

</div>