Side bar easy navigation with JQuery & Css, Bootstrap

When a web application is developed, the user friendliness is the most important factor. No matter how we write the data access class or business logic, the presentation is the key factor for user to feel easiness & comfort in the application. So making it a bit fancy with controls that make the user easy for navigation in a single page is important.
Certainly there is a rich menu in your application for navigation. May be the menu could be really complex to design and implement with user level restrictions with authentication and authorization to each modules.
What if the navigated page is loo lengthy and need to scroll down to see more content. Or what if your page fetch the content to the bottom each time you scroll down such as listing items? Here is an easy way.

1. Download the VCore Sidebar from here
2. Reference it from your page. (After JQuery reference)

   <link href="Responsive/js/Sidebar/vcore.sidebar.css" rel="stylesheet" type="text/css" />  
   <script src="Responsive/js/Sidebar/vcore.sidebar.js" type="text/javascript"></script>   

3. Add a div on top of your page

 <div class="divId" style=""></div>  

4. And then create the control as below. Add any items as needed.

 $(function () {  
   $('.ipodSideBar').vSidebar({  
     'items': [  
             { link: '#topDivId', 'className': 'fa fa-arrow-circle-up fa-2x set-margin', 'label': 'Top' },  
             { link: '#middleDivId', 'className': 'fa fa-street-view fa-2x set-margin', 'label': 'Middle' },  
             { link: '#bottomDivId', 'className': 'fa fa-arrow-circle-down fa-2x set-margin', 'label': 'Bottom' } 
           ],  
     'position': 'right bottom'  
   });  
 });  

3. Here the fortawesome is used for icons and you can download the fortawesome here.

4. The following css class is added to the vcore.sidebar.css to make the items center.

  .set-margin  
  {  
    margin-left:auto;  
    margin-right:auto;  
    display:block;  
    text-align:center;  
    text-decoration:none;  
    margin-top:3px;  
  }  

5. Finally, you may get a nice set of vertical menu bar like this;

Adding a bit of JQuery for scrolling transitions, you may feel a lot better when this buttons are clicked. A smooth scrolling will make user interesting to navigate between content.

Happy coding ... :)