单击导航到页面其他部分的链接时滑动动画

I think the title says enough. So have now is that when I click on "Example 4" it scrolls the page to the h1 of Example 4. But it is so ugly that when I click on it, it just BOOM is there. I want it to scroll smoothly, can this be done with only html/css or do I need jQuery/JS or something? This is a quick example from what I have right now.I think the title says enough. So have now is t