title: HTML page table pagination not showing the top of page
body: <p>I have a working code from one page called:
  oneSimpleTablePagination (see below) and need some help with it. If I go to page 2 or 3, 4, etc. it will always display new pages on the bottom part of the page. I need that every page (2, 3, 4....) will be displaying always top of the page. So if I click on next page I need to display this page from the top not from bottom part of it.</p>
  
  <p>Any ideas how to modify this whole code to do it? Thanks</p>
  
  <pre><code>/**
   * OneSimpleTablePaging
   * - A small piece of JS code which does simple table pagination.
   *   It is based on Ryan Zielke's tablePagination 
   *   which is licensed under the MIT licenses
   *   Button designs are based on Google+ Buttons in CSS design from Pixify
   *   (http://pixify.com/blog/use-google-plus-to-improve-your-ui/).
   *
   * @author Chun Lin (GCL Project)
   *
   *
   * @name oneSimpleTablePagination
   * @type jQuery
   * @param Object userConfigurations:
   *      rowsPerPage - Number - used to determine the starting rows per page. Default: 10
   *      topNav - Boolean - This specifies the desire to have the navigation be a top nav bar
   *
   *
   * @requires jQuery v1.2.3 or above
   */
  $("html").scrollTop(0);
  
  $.prototype.extend(
  
                    {
          'oneSimpleTablePagination': function(userConfigurations) {
              var defaults = {
                  rowsPerPage : 20,
                  topNav : false
              };
              defaults = $.extend(defaults, userConfigurations);
  
              return this.each(function() {
                  var table = $(this)[0];
  
                  var currPageId = '#tablePagination_currPage';
  
                  var tblLocation = (defaults.topNav) ? "prev" : "next";
  
                  var tableRows = $.makeArray($('tbody tr', table));
  
                  var totalPages = countNumberOfPages(tableRows.length);
  
                  var currPageNumber = 1;       
  
                  function hideOtherPages(pageNum) {
                      var intRegex = /^\d+$/;
                      if (!intRegex.test(pageNum) || pageNum &lt; 1 || pageNum &gt; totalPages)
                          return;
                      var startIndex = (pageNum - 1) * defaults.rowsPerPage;
                      var endIndex = (startIndex + defaults.rowsPerPage - 1);
                      $(tableRows).show();
                      for (var i = 0; i &lt; tableRows.length; i++) {
                          if (i &lt; startIndex || i &gt; endIndex) {
                              $(tableRows[i]).hide();
                          }
                      }
                  }
  
                  function countNumberOfPages(numRows) {
                      var preTotalPages = Math.round(numRows / defaults.rowsPerPage);
                      var totalPages = (preTotalPages * defaults.rowsPerPage &lt; numRows) ? preTotalPages + 1 : preTotalPages;
                      return totalPages;
                  }
  
                  function resetCurrentPage(currPageNum) {
                      var intRegex = /^\d+$/;
                      if (!intRegex.test(currPageNum) || currPageNum &lt; 1 || currPageNum &gt; totalPages)
                          return;
                      currPageNumber = currPageNum;
                      hideOtherPages(currPageNumber);
                      $(table)[tblLocation]().find(currPageId).val(currPageNumber);
                  }
  
                  function createPaginationElements() {
                      var paginationHTML = "";
                      paginationHTML += "&lt;div id='tablePagination' style='text-align: center; border-top: solid 2px #0033CC; padding-top: 5px; padding-bottom: 5px;'&gt;";
                      paginationHTML += "&lt;a id='tablePagination_firstPage' href='javascript:;' class='button left'&gt;prvá&lt;/a&gt;";
                      paginationHTML += "&lt;a id='tablePagination_prevPage' href='javascript:;' class='button right'&gt;predošlá&lt;/a&gt;";
                      paginationHTML += "Strana ";
                      paginationHTML += "&lt;input id='tablePagination_currPage' type='input' value='" + currPageNumber + "' size='1'&gt;";
                      paginationHTML += " z " + totalPages + "&amp;nbsp;&amp;nbsp;&amp;nbsp;";
                      paginationHTML += "&lt;a id='tablePagination_nextPage' href='javascript:;' class='button left'&gt;ďalšia&lt;/a&gt;";
                      paginationHTML += "&lt;a id='tablePagination_lastPage' href='javascript:;' class='button right'&gt;posledná&lt;/a&gt;";
                      paginationHTML += "&lt;/div&gt;";
                      return paginationHTML;
                  }
  
                  $(this).before("&lt;style type='text/css'&gt;a.button {color: #023042;font: bold 12px Helvetica, Arial, sans-serif;text-decoration: none;padding: 7px 12px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s;background: #99CCFF;background: -webkit-gradient(linear,0% 40%,0% 70%,from(#38C1F9),to(#C6EDFD));background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#38C1F9),to(#C6EDFD));border: solid 1px #023042;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;margin-right: 10px;}a.button:hover {color: #247FCA;border-color: #247FCA;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}a.button:active {color: #000;border-color: #444;}a.left {-webkit-border-top-right-radius: 0;-moz-border-radius-topright: 0;border-top-right-radius: 0;-webkit-border-bottom-right-radius: 0;-moz-border-radius-bottomright: 0;border-bottom-right-radius: 0;margin: 0;}a.right:hover { border-left: solid 1px #999 }a.right {-webkit-border-top-left-radius: 0;-moz-border-radius-topleft: 0;border-top-left-radius: 0;-webkit-border-bottom-left-radius: 0;-moz-border-radius-bottomleft: 0;border-bottom-left-radius: 0;border-left: solid 1px #f3f3f3;border-left: solid 1px rgba(255, 255, 255, 0);}&lt;/style&gt;");
  
                  if (defaults.topNav) {
                      $(this).before(createPaginationElements());
                  } else {
                      $(this).after(createPaginationElements());
                  }
  
                  hideOtherPages(currPageNumber);
  
                  $(table)[tblLocation]().find('#tablePagination_firstPage').click(function (e) {
                      resetCurrentPage(1);
                  });
  
                  $(table)[tblLocation]().find('#tablePagination_prevPage').click(function (e) {
                      resetCurrentPage(parseInt(currPageNumber) - 1);
                  });
  
                  $(table)[tblLocation]().find('#tablePagination_nextPage').click(function (e) {
                      resetCurrentPage(parseInt(currPageNumber) + 1);
                  });
  
                  $(table)[tblLocation]().find('#tablePagination_lastPage').click(function (e) {
                      resetCurrentPage(totalPages);
                  });
  
                  $(table)[tblLocation]().find(currPageId).on('change', function (e) {
                      resetCurrentPage(this.value);
                  });
  
              })
          }
      })
  
  $('#katalog').oneSimpleTablePagination({rowsPerPage: 20});
  </code></pre>