scroll panel

by lovromar

HTML

<nav id="main">
    <ul>
        <li><a href="#top" class="scroll"></a></li>
        <li><a href="#middle" class="scroll"></a></li>
        <li><a href="#bottom" class="scroll"></a></li>
    </ul>
</nav>
<section id="top">
    1
</section>

<section id="middle">
    2
</section>

<section id="bottom">
    3
</section>

CSS

nav#main { position:fixed; top:45%; right:20px; z-index:9999; }

/* I added #main to the selector of the active class */

nav#main a:hover, nav#main li.active a { background: #ff0; }
nav#main a { margin-bottom:10px; background: #000; display:block; height:15px; width:15px; overflow:hidden; }

#top { width:100%; height:800px; background: #eee; }
#middle { width:100%; height:800px; background: #ddd; }
#bottom { width:100%; height:640px; background: #aaa; }

body { font-size: 100px; }

JavaScript

var main = main = $('#main ul');

$('.scroll').click(function(event) {
        
    event.preventDefault();
 
    var full_url = this.href,
        parts = full_url.split('#'),
        trgt = parts[1],
        target_offset = $('#'+trgt).offset(),
        target_top = target_offset.top;
        
    $('html, body').animate({scrollTop:target_top}, 500);
    
    /* Remove active class on any li when an anchor is clicked */
    
    main.children().removeClass();
    
    /* Add active class to clicked anchor's parent li */
        
    $(this).parent().addClass('active');

});