jQuery: smooth scrolling with fixed header

just add you header height after crollTop: target.offset().top this like crollTop: target.offset().top-100 and that's all. you need to check your header height then set a offset

//smooth scrolling from css-tricks

$('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-100
            }, 1000);
            return false;
        }
    }
});

.header {
    position: fixed; 
    top:0; 
    left: 0; 
    right: 0; 
    background: #000; 
    height: 40px; 
    padding: 20px 40px;
}
a { 
    color: #fff; 
    float: left; 
    padding: 10px; 
}
.section { 
    height: 400px; 
    background: green; 
}
.section.add { background: red; }
.section.add3 { background: #000; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div class="header">
    <a href="#section1">scroll</a>
</div>

<div class="section"></div>
<div class="section add" id="section1"></div>
<div class="section add3"></div>

I just figure out how to solve my problem. I have created variable.

var fixedMenu = $(''#fixedtopheader").height():

And instead scrollTop: target.offset().top - fixedMenu

Works fine now!

I have code for you. Check this link. It may help you: https://jsfiddle.net/6mujyLw3/ In this i have you separated section for each. Add padding top in each section as height of your header.

HTML

<div class="m1 menu">
<div id="menu-center">
    <ul>
        <li><a class="active" href="#home">Home</a>

        </li>
        <li><a href="#portfolio">Portfolio</a>

        </li>
        <li><a href="#about">About</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
    </ul>
</div>
</div>
<div id="home">
  <h1>Home </h1>
</div>
<div id="portfolio">
   <h1>Portfolio</h1>
</div>
<div id="about">
  <h1>About</h1>
</div>
<div id="contact">
 <h1>Contact</h1>
</div>

CSS:

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.menu {
  width: 100%;
  height: 75px;   
  position: fixed;
  background-color:rgba(4, 180, 49, 0.9);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index:99999;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-family:'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family:'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
padding-top:70px;text-align:center;
}
#portfolio {    
height: 100%;
width: 100%; padding-top:70px;text-align:center;
}
#about {
background-color: blue;
height: 100%;
width: 100%; padding-top:70px;text-align:center;
}
#contact {
background-color: red;
height: 100%;
width: 100%;  padding-top:70px;text-align:center;
}

JS

$(function() {
  $('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
      }, 1000);
      return false;
    }
  }
});
});