Edit in JSFiddle

$(function() {
    $('a.scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});
<body>
<div class="banner">
  <h1>這是範例網頁</h1>
  <div class="navbar">
    <a class="scroll" href="#about">About</a>
    <a class="scroll" href="#work">Work</a>
    <a class="scroll" href="#gallery">Gallery</a>
    <a class="scroll" href="#contact">Contact</a>
  </div>
</div>
<div class="content-section" id="about">
  <h1>About</h1>
  <p>content........</p>
</div>
<div class="content-section" id="work">
  <h1>Work</h1>
  <p>content........</p>
</div>
<div class="content-section" id="gallery">
  <h1>Gallery</h1>
  <p>content........</p>
</div>
<div class="content-section" id="contact">
  <h1>Contact</h1>
  <p>content........</p>
</div>
</body>
.banner{
  background-color: yellow;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
a:link {
  text-decoration: none;
  color: #444444;
}
a:hover{
  background-color: grey;
}

.content-section{
  text-align: center;
  margin-top: 5px;
  height: 200px;
  border: 2px dotted black;
}

External resources loaded into this fiddle: