jQuery slideUp effect Issue

Question

Does anyone knows how to resolve this issue? I'm trying to slide up my links ( navigation menu ) located in a sticky footer, by clicking on them. It works good without slide effect but when I change the attribute to slideUp('slow') it doesnt work completely! Any suggestions will be appreciated! I just cant get my head around this. Thank you in advance :)

This is my code:

$(document).ready(function(){

  $('#link_2').click(function(){
    $('#div_1').hide();
    $('#div_2').show();
   });
  $('#link_1').click(function(){ 
     $('#div_2').hide();
     $('#div_1').show();
 }); 
  $('#link_3').click(function(){ 
     $('#div_2'),$('#div_1').hide();
     $('#div_3').show();
  }); 
$('#link_4').click(function(){ 
  $('#div_2')$('#div_1')$('#div_3').hide();
  $('#div_4').show();
  }); 
  });

css:

#div_1{
    width: 100%;
    height: 600px;
    background-color: yellow;
    display: block;
}
#div_2 {
    width: 100%;
    height:600px;
    background-color: red;
    display: block;
    }
#div_3 {
    width: 100%;
    height:600px;
    background-color: blue;
    display: block;
    }
#div_4 {
    width: 100%;
    height:600px;
    background-color: grey;
    display: block;
    }


 footer{
        position:fixed;
        bottom:0;
        height: 30px; 
        width:100%;
        background: green;
     }

Html

     <div id="div_1"> Content1 </div>
     <div id="div_2"> Content2 </div>
     <div id="div_3"> Content3 </div>
     <div id="div_4"> Content4 </div>

     <footer>
     <a href="#div_1" id="link_1">Press me</a>
     <a href="#div_2" id="link_2">Press me</a>
     <a href="#div_3" id="link_3">Press me</a>
     <a href="#div_4" id="link_4">Press me</a>
     </footer>

Answer 1

Hey Anita are you looking for something like this?

Check it on jsfiddle

function scrollToElement(element) {
    $('html,body').animate({
        scrollTop: element.offset().top
    }, 1000);
}

$('#link_1').on('click', function(){
    scrollToElement($('#div_1'));
});

$('#link_2').on('click', function(){
    scrollToElement($('#div_2'));
});

$('#link_3').on('click', function(){
    scrollToElement($('#div_3'));
});

$('#link_4').on('click', function(){
    scrollToElement($('#div_4'));
});