滚动到表格内的特定位置答案

【问题标题】：Scroll to particular postion inside a table滚动到表格内的特定位置
【发布时间】：2018-07-17 09:38:55
【问题描述】：

我有一个可能超过 100 行的表所以我使用了 Scroll 类来固定高度.. 我在表格中有一个单选按钮

问题是在渲染表格时假设默认选择第 50 行，默认情况下它必须到该位置每行都有一个由行代码给出的相应类.. 我只想将它滚动到特定的类。滚动是针对特定的 div。我需要转到表内的特定类

HTML

<table class="table-scroll">
<tr class="radio1"><td>1</td></tr>
<tr class="radio2"><td>2</td></tr>
<tr class="radio3"><td>3</td></tr>
</table>

CSS

.table-scroll{
    max-height:500px;
    overflow-x:hidden;
    overflow-y:scroll;
    margin-bottom:20px;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
}

<script>
How to scroll to particular class suppose radio3??
</script>

【问题讨论】：

您可以使用哈希位置并导航到它吗？即 page.html#row50
我该怎么做？
使用javascript，window.location.href?
我在特定 div 内有一个滚动条，而不是窗口滚动条
如果你知道div内每一行的高度和表格上方的内容，那么在JS中很容易。

标签： javascript jquery html css bootstrap-4

【解决方案1】：

您需要scrollIntoView(options) 才能将元素滚动到视图中。 Refer the docs 了解如何传递 options 对象和浏览器兼容性。

function scrollto()
{
    var selectedclass = "radio15";
    var table = document.getElementById("test");
    var elem = table.getElementsByClassName(selectedclass)[0];
    elem.scrollIntoView();
}

.table-scroll
{
    max-height:100px;
    overflow-y:scroll;
    border:1px solid #000;
    display:block;
}

<table class="table-scroll" id="test">
    <tbody>
        <tr class="radio1"><td>1</td></tr>
        <tr class="radio2"><td>2</td></tr>
        <tr class="radio3"><td>3</td></tr>
        <tr class="radio4"><td>4</td></tr>
        <tr class="radio5"><td>5</td></tr>
        <tr class="radio6"><td>6</td></tr>
        <tr class="radio7"><td>7</td></tr>
        <tr class="radio8"><td>8</td></tr>
        <tr class="radio9"><td>9</td></tr>
        <tr class="radio10"><td>10</td></tr>
        <tr class="radio11"><td>11</td></tr>
        <tr class="radio12"><td>12</td></tr>
        <tr class="radio13"><td>13</td></tr>
        <tr class="radio14"><td>14</td></tr>
        <tr class="radio15"><td>15</td></tr>
        <tr class="radio16"><td>16</td></tr>
        <tr class="radio17"><td>17</td></tr>
        <tr class="radio18"><td>18</td></tr>
        <tr class="radio19"><td>19</td></tr>
        <tr class="radio20"><td>20</td></tr>
    </tbody>
</table>
<button id="scroll" onclick="scrollto()">Scroll to radio15</button>

【讨论】：

【解决方案2】：

<tr class="radio3" id="radio3"><td>3</td></tr>
<script>
    $(window).load(function(){

       top.location.href = '#radio3';

    });
</script>

我觉得对你很有帮助

【讨论】：