Floating component on the right to indicate a section on the page

here you go, i made an example of how you can do this: DEMO

HTML:

<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
<section>Section 4</section>
<div id="bulletContainer">
    <div class="bullet highlighted"></div>
    <div class="bullet"></div>
    <div class="bullet"></div>
    <div class="bullet"></div>
</div>

      

        
        
        
      

    

CSS

*{
    margin:0;
    padding:0;
}
section{
    position:relative;
    width:100%;
    height:400px;
    background-color:#CCC;
    border-bottom:1px solid #000;
}
#bulletContainer{
    position:fixed;
    width:25px;
    height:140px;
    left:100%;
    top:50%;
    margin-left:-50px;
    margin-top:-70px;
}
.bullet{
    background-color:#666;
    border-radius:50%;
    width:25px;
    height:25px;
    margin-bottom:10px;
    cursor:pointer;
}
.highlighted{
    background-color:#F90;
}

      

        
        
        
      

    

JQuery

$(document).on('scroll',function(){
    $('section').each(function(index){
        if($(document).scrollTop()>=$(this).offset().top-50){
            $('.bullet').not($('.bullet').eq(index)).removeClass('highlighted');
            $('.bullet').eq(index).addClass('highlighted');
        }
    });
});
$('.bullet').click(function(){
    $('.bullet').not(this).removeClass('highlighted');
    $(this).addClass('highlighted');
    var index=$(this).index();
    $('body, html').animate({scrollTop:$('section').eq(index).offset().top},200);
});

      

        
        
        
      

    

if you scroll down the page or click on any of the bullets you can see the bullet highlight and scroll the page into the section.

NOTE: this code has a tolerance 50px

, it means scrolling 50px over the desired element, the bullet is highlighted, you can change it at any time.