title: jquery pagination scroll to top
body: <p>I am using the attached code for pagination, im trying to add a function to scroll the page to the top when navigating the pagination.
  My source script is below, that i found here.</p>
  
  <pre><code>    $(document).ready(function () {
  
          //how much items per page to show
          var show_per_page = 5;
          //getting the amount of elements inside content div
          var number_of_items = $('#content').children().size();
          //calculate the number of pages we are going to have
          var number_of_pages = Math.ceil(number_of_items / show_per_page);
  
          //set the value of our hidden input fields
          $('#current_page').val(0);
          $('#show_per_page').val(show_per_page);
          var navigation_html = '&lt;ul&gt;';
  
          navigation_html += '&lt;li class="previous_link"&gt;';
          navigation_html += '&lt;a href="javascript:previous();"&gt;&amp;larr;&lt;/a&gt;';
          navigation_html += '&lt;/li&gt;';
          var current_link = 0;
          while (number_of_pages &gt; current_link) {
              navigation_html += '&lt;li class="page_link" id="id' + current_link + '"&gt;';
              navigation_html += '&lt;a href="javascript:go_to_page(' + current_link + ')" longdesc="' + current_link + '"&gt;' + (current_link + 1) + '&lt;/a&gt;';
              current_link++;
              navigation_html += '&lt;/li&gt;';
          }
          navigation_html += '&lt;li&gt;';
          navigation_html += '&lt;a class="next_link" href="javascript:next();"&gt;&amp;rarr;&lt;/a&gt;';
          navigation_html += '&lt;/li&gt;';
          navigation_html += '&lt;/ul&gt;';
  
          $('#page_navigation').html(navigation_html);
  
  
          //add active class to the first page link
          $('#page_navigation .page_link:first').addClass('active');
  
          //hide all the elements inside content div
          $('#content').children().css('display', 'none');
  
          //and show the first n (show_per_page) elements
          $('#content').children().slice(0, show_per_page).css('display', 'block');
  
      });
  
  function previous() {
  
      new_page = parseInt($('#current_page').val()) - 1;
      //if there is an item before the current active link run the function
      if ($('.active').prev('.page_link').length == true) {
          go_to_page(new_page);
      }
  
  }
  
  function next() {
      new_page = parseInt($('#current_page').val()) + 1;
      //if there is an item after the current active link run the function
      if ($('.active').next('.page_link').length == true) {
          go_to_page(new_page);
      }
  
  
  }
  
  function go_to_page(page_num) {
      //get the number of items shown per page
      var show_per_page = parseInt($('#show_per_page').val());
  
      //get the element number where to start the slice from
      start_from = page_num * show_per_page;
  
      //get the element number where to end the slice
      end_on = start_from + show_per_page;
  
      activate_id = page_num;
      var get_box = document.getElementById("id" + page_num);
      //hide all children elements of content div, get specific items and show them
      $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
  
      /*get the page link that has longdesc attribute of the current page and add active class to it
       and remove that class from previously active page link*/
      $("#page_navigation").find('li.active').removeClass("active");
      $(get_box).addClass("active");
  
      //update the current page input field
      $('#current_page').val(page_num);
  }
  </code></pre>
  
  <p>I have tried adding </p>
  
  <pre><code>$('#page_navigation .page_link').click(function () {
          $('body,html').animate({
              scrollTop: 0
          }, 600);
          return false;
      });
  </code></pre>
  
  <p>This is unfamiliar territory for me so any assistance would be much appreciated.</p>