Smooth scrolling down

Question

I am trying to make so when you click on a text i want it to animate to a part of the page further down. example: https://osynlig.se click on Case and u can see that it animates down to that part of the page.

on my website. When i click on home,Info,contact us i want it to animate to the part of the page where those things are and i dont know how to do that :(

http://pixelatedore.zapto.org/ to see that code go to my website and do ctrl+u

i dont know how to paste in code here :3.

If you could send a link to a website that explains or if you know and write in the comments. that would be higly appriciated.

Answer 1

something like this ?

$(document).ready(function(){
   $(".anchor").click(function(e){
      $('html, body').animate({
       scrollTop: $($(this).attr('href')).offset().top
      }, 1000);
   });
});

#top{background-color:red;}
#middle{background-color:yellow;}
#bottom{background-color:green;}
div.block{height:400px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toppage"></div>
<a class="anchor" href="#top"> 
        <div class="arrow-down-light-blue">top</div>
    </a>


    <a class="anchor" href="#middle">
        <div class="arrow-down-light-blue">middle</div>
   

    <a class="anchor" href="#bottom">
        <div class="arrow-down-light-blue">bottom</div>
    </a>

<div class="block" id="top">The top
  <a class="anchor" href="#toppage"> Back to top</a>
      </div>
<div class="block" id="middle">The middle
      <a class="anchor" href="#toppage"> Back to top</a>
      </div>
<div  class="block" id="bottom">The bottom
      <a class="anchor" href="#toppage"> Back to top</a>
      </div>