Span при щелчке переходить в div

Чтобы было легче увидеть, как это работает, я применил размер к телу, прокрутил вниз, затем щелкнул «Вверх», чтобы увидеть, как он работает. Я просто изменил метод вызова функции на on('click', ...).
Также я добавил в диапазон cursor:pointer, чтобы было понятнее, что он интерактивен.

Что касается вашего дополнительного вопроса, я думаю, что это из-за #, который вы используете в href, который заставил страницу перезагрузиться.

 $("#myButton").on('click', function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);			
}); 

.container{  
  height:400px;
  background-color:red;
}
#myButton{
	cursor: pointer;
}
body{
	height: 750px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "myDiv" class = "container">
</div> 
 
 <footer><p class = "pull-right"><i class = "fa fa-arrow-circle-up"></i><span id = "myButton">Move to Up</span> </p> &copy; 2018 Sell It, Inc. <a href = "#">Terms </a> &middot; <a href = "#">Conditions</a></footer>

ИЗМЕНИТЬ для дополнительного вопроса
Если вы не хотите, чтобы страница перезагружалась на #, используйте реальный URL-адрес или вы можете обернуть эти кнопки в разделе и привязать к нему, что-то вроде этого:

    .container{  
      height:400px;
      background-color:red;
    }
    #myButton{
    	cursor: pointer;
    }
    body{
    	height: 750px;
    }

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "myDiv" class = "container">
</div> 

 <footer>
   <p class = "pull-right"><i class = "fa fa-arrow-circle-up"></i>
      <span id = "myButton">Move to Up</span> 
   </p> &copy; 2018 Sell It, Inc. 
<section id='terms_conditions'>
    <a href = "#terms_conditions">Terms </a> &middot; <a href = "#terms_conditions">Conditions</a>
</section>
 </footer>