title: jQuery scrollTop viewport issue. How to add a custom value to position().top
body: <p>I'm developing a single page wordpress website. As it is a single page one I have used jQuery scrollTop for animating the menu. I want to go to specific div when I click on the corresponding menu link with div id.. 
  Current Problem is the fixed positioned menu tab is crossing the content.. It shows over the div content (viewport issue). </p>
  
  <p>I want to give a gap between this menu tab and div content for making the content fully visible. </p>
  
  <p>jQuery code used for scrolling effect is as below:</p>
  
  <pre><code>$(document).ready(function() {
  
      $('a[href=#welcome]').click(function(){
  
       $('html, body').animate({scrollTop:$('#welcome').position().top}, 'slow');
  
       return false;
  
      });
  
  
  
  });
  
  
  $(document).ready(function() {
  
    $('a[href=#aboutus]').click(function(){
       $('html, body').animate({scrollTop:$('#aboutus').position().top}, 'slow');
  
       return false;
  
    });
  
  });
  </code></pre>
  
  <p>What I need is to add some value like 200px to the above div's top position ".position().top}" so that I can scroll to a position below the top of the div...</p>
  
  <p>Edit:"Sorry Guys... I made a mistake in above requirement.. I have to subtract a value from the div's top position so that I can scroll to a position above the top of the div.."</p>
  
  <p><br>How can i fix this? Any help will be appreciated..</p>
  
  <p>Thanks in advance..</p>