Focus on content of a table inside a small div

Question

I'm working on a panel (using div) that will show several speaker names of an event. I created a HTML table containing the list of names of those speakers. This panel may be small in size and the number of speakers may be large, so the table may not be fully displayed.

I want to use jQuery to display the tr that contains the class 'disc' when the table is loaded, because it is the class that identifies the speaker that is speaking at the moment.

Here is a piece of my code:

<div class="panel">
<table class="table">
    <tbody>
        <tr class="row-1"><td>JOHN DOE</td></tr>
        ...
        ...
        <tr class="row-136 disc">
            <td>BOB DYLAN</td>
        </tr>
        ...
        ...
    </tbody>
</table>

Answer 1

Since it's important to show not only the "desc" class row, but also to show it somewhere in the middle of the screen, I would recommend building a small function with explicitly defined variables. The approach in the "duplicate answer" is a single line, which is difficult to perfect and difficult to maintain.

This function should be more clear,

target = $(".disc");
lineHeight = target.height();
distanceFromTop = target.offset().top;
linesFromTop = 5;

$(window).scrollTop(distanceFromTop - (lineHeight * linesFromTop));

Answer 2

Using the table you've given in that link, I've updated my code to fit. The only real changes I made were to make the table display: inline-block;, to remove the inline height style and define that as a rule, and to change the selector in my jQuery code to fit your table.

$('.mz').animate({
  scrollTop: $(".disc").first().offset().top-50
}, 2000);

.table {
  display: inline-block;
  max-height: 200px;
  overflow-y: auto;
  padding: 0;
}

thead tr:first-child {
  background-color: #00f;
  color: #fff;
  position: absolute;
  top: 0;
  left: 8px;
  right: 25px;
  display: block;
  box-sizing: border-box;
}

thead tr:first-child th {
  display: inline-block;
  color: #fc0;
  margin-right: -2px;
  background: #55f;
  box-sizing: border-box;
}

td,
th {
  background: #aaa;
  width: 33%;
}

tbody tr:first-child td {
  padding-top: 10px;
}

table {
  width: 100%;
  margin: 0;
  border: 1px #f00 solid;
}
.disc {
  color: red;
}
.line-through td {
  text-decoration: line-through;
}
.row-title td {
  background-color: #33f;
  color: #99f;
}
.align-c {
  text-align: center;
}
td {
  height: 33px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table mz">
  <tbody>
    <tr class="row-title">
      <td colspan="3">PEQUENO EXPEDIENTE</td>
    </tr>
    <tr class="row-135 line-through">
      <td>1. DEPUTADA CANTORA MARA LIMA</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PT</td>
    </tr>
    <tr class="row-137 line-through">
      <td>2. DEPUTADA CLAUDIA PEREIRA</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PSC</td>
    </tr>
    <tr class="row-138 line-through">
      <td>3. DEPUTADA CRISTINA SILVESTRI</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PPS</td>
    </tr>
    <tr class="row-142 ">
      <td>4. DEPUTADO ADELINO RIBEIRO</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PSL</td>
    </tr>
    <tr class="row-143 ">
      <td>5. DEPUTADO ADEMAR TRAIANO</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PSDB</td>
    </tr>
    <tr class="row-144 ">
      <td>6. DEPUTADO ALEXANDRE CURI</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PMDB</td>
    </tr>
    <tr class="row-147 ">
      <td>7. DEPUTADO COBRA REPORTER</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PSC</td>
    </tr>
    <tr class="row-149 ">
      <td>8. DEPUTADO ALEXANDRE GUIMARAES</td>
      <td >PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PSC</td>
    </tr>
    <tr class="row-title">
      <td colspan="3">GRANDE EXPEDIENTE</td>
    </tr>
    <tr class="row-136 disc">
      <td style="height:33px">1. DEPUTADA CANTORA MARA LIMA</td>
      <td style="height:33px">GRANDE EXPEDIENTE</td>
      <td width="70" class="align-c" style="height:33px">PT</td>
    </tr>
    <tr class="row-139 line-through">
      <td style="height:33px">2. DEPUTADA CLAUDIA PEREIRA</td>
      <td style="height:33px">GRANDE EXPEDIENTE</td>
      <td width="70" class="align-c" style="height:33px">PSC</td>
    </tr>
    <tr class="row-145 line-through">
      <td style="height:33px">3. DEPUTADA CRISTINA SILVESTRI</td>
      <td style="height:33px">GRANDE EXPEDIENTE</td>
      <td width="70" class="align-c" style="height:33px">PPS</td>
    </tr>
    <tr class="row-title">
      <td colspan="3" style="height:33px;line-height:33px">HORÁRIO DAS LIDERANÇAS</td>
    </tr>
    <tr class="row-140 ">
      <td style="height:33px">1. DEPUTADA CLAUDIA PEREIRA</td>
      <td style="height:33px">HORÁRIO DAS LIDERANÇAS</td>
      <td width="70" class="align-c" style="height:33px">PSC</td>
    </tr>
    <tr class="row-146 line-through">
      <td style="height:33px">2. DEPUTADA CRISTINA SILVESTRI</td>
      <td style="height:33px">HORÁRIO DAS LIDERANÇAS</td>
      <td width="70" class="align-c" style="height:33px">PPS</td>
    </tr>
  </tbody>
</table>