Question

我有一张表可能超过100行所以我使用Scroll类给出修复高度.. 我在桌子里面有一个单选按钮

问题是当表格被渲染时，假设默认选择了一行No 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;
}

JS

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

       top.location.href = '#radio3';

    });
</script>

我认为这对你很有帮助

滚动到表格内的特定位置

2 个答案: