Table scroll with roll position according to date

Question

I have a table with a birthday list. I use a div that leaves her scroll with horizontal size fixed. I would like the table scroll to be at the position of the current date. As in this picture below:

Supposing today was the 20th.

I made a Jsfiddle.

Answer 1

I suggest to do this using jquery, follow an alternative solution, take the current day and use the .animate() to scroll to the respective element of the selector, the -140 is just to center the date in the view.

If you want for the current day just comment on the var day = 17; and discolour the var day = d.getDate();. I hope it helps.

$(document).ready(function() {
  var d = new Date();
  //var day = d.getDate();
  var day = 17;
  // Handler for .ready() called.
  $('#table-scroll').animate({
    scrollTop: $('td:contains("' + day + '")').offset().top - 140
  }, 'slow');
});

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 300px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
  border: 1px solid #e1e1e1;
  background-color: #fefefe;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table-wrapper">
  <div id="table-scroll">
    <table>
      <tr>
        <td>1</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>8</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>10</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>11</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>13</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>14</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>15</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>16</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>17</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>18</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>19</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>20</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>21</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>22</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>23</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>24</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>25</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>26</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>27</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>28</td>
        <td>Fulano</td>
      </tr>
    </table>
  </div>
</div>