autoscroll in main container when navbar item clicked

Question

I am designing a new blog site. In the index page, I will show a no. of blogs(lets say 10). The main container will show the blog title and the description.

I have a right navbar which shows all the titles(only titles, not the description) I want the following two things

1. The title(in the side navbar) which is being shown in the main container will be automatically highlighted.
2. If I click on any title, the page should automatically scroll so that, that blog will be shown to the user.

I have seen this being implemented in lots of pages. Can somebody tell me how to implement this ?

I am using the following JavaScript/CSS libraries

1. JQuery
2. Twitter bootstrap3

Answer 1

1. There is a bunch of jquery solutions for this part. Here is one: How can I highlight a selected list item with jquery?

2. I have used the following script successfully in Boostrap 3.0. As long as you add an id indicator (hashtag) to the href in the li:

   <li><a href="#profile">PROFILE</a></li>
   

As well as the same id to the div:

<div class="row" id="profile">

This script will work:

<script>
  $(function() {
    $('ul#nav > li > a[href*=#]:not([href=#])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
      || location.hostname == this.hostname) {

    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top - 200
      }, 2000);
      return false;
      }
    }
   });
  });
</script>