Smooth scroll catre un div

Ce cod trebuie sa folosesc pentru a face un smooth scroll atunci cand apas pe un buton? Sa ma duca catre un paragraf?      
HTML:
<div id="navbar">
<div class="row">
<div class="col-sm-3 pg1">
  <a href="#content1pg1"><button type="button" class="about">DESPRE RESTAURANT</button></a>
</div>
<div class="col-sm-3 pg2">
  <button type="button" class="about">EVENIMENTE</button>
</div>
<div class="col-sm-3 pg3">
  <button type="button" class="about">CONTACT SI REZERVARI</button>
</div>
<div class="col-sm-3 pg4">
  <button type="button" class="about">GALERIE FOTO</button>
</div>
</div>
</div>
<div id="headercb">
<img class="headerlogo" src="cg.png">
</div>
<div id="content1pg1">
<h2 class="content1pg1">Restaurant cu specific romanesc si italian
</h2>
<p class="content1pg1">Bine ati venit la Celebration Garden! Veti gasi aici un festival de arome care sa va poarte departe de viata agitata a orasului. Va propunem o experienta speciala intr-un cadru relaxant si armonios, completat de specialitatile noastre culinare! Specificul nostru este <b>bucataria romaneasca</b> si cea <b>italiana</b>.
</div>

CSS :
body {
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#headercb {
  overflow:hidden;
  margin: 0 auto;
  display: block;





}
img.headerlogo {
  margin: 0 auto;
  display: block;
margin-top: 120px;
text-shadow: 0 0 3px #FF0000;
}
#navbar {
  width: 100%;
  margin: 0 auto;
  position:fixed;

}

h2.about {
  text-align: center;
  font-family: 'Righteous', cursive;
}
button.about {
    background-color:rgba(0, 0, 0, 0.7);
    top:0;
    color: white;
    font-family: Sans-serif;
    font-size: 20px;
    width: 100%;
    line-height: 60px;
    margin: 0 auto;
    text-align: center;
    border: 0;
    transition: all 0.8s ease 0s;
    font-family: 'Righteous', cursive;
    height: 100px;
    text-shadow: 0 0 15px  #7c9630;
  

  }
button:hover {
  background: #7c9630;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 37px 50px 0 rgba(0,0,0,0.7);
}
button.about:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 15px;
    width: 0%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  
}
p.despre {
  margin:0 auto;
}
.pg2.col-sm-3 {
  padding-right: 70px;
}
.pg3.col-sm-3 {
  padding-left: 70px;
}
#content1pg1 {
  margin: 0 auto;
  width:100%;
  height:500px;
  background-image: url('poza11.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  margin-top:30px;
}
h2.content1pg1 {
  color: white;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  padding-top:120px;
  display:block;
  font-family: 'Lobster Two', cursive;
  font-size: 40px;
}
p.content1pg1 {
  color: white;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  font-size: 20px;
  padding-top: 120px;
  width:70%;
}

Vezi: http://stackoverflow...o-div-id-jquery

uite aici: https://css-tricks.c...ooth-scrolling/