CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
Parshuram Kalvikatte
Parshuram Kalvikatte

Reputation: 1646

Scroll to particular postion inside a table

I have a table which may have more than 100 rows So i have used Scroll class giving fix height.. I have a radio button inside a table

Problem is when the table is rendered suppose a row No 50 is selected by default , it must go to that position by default Every row has a respective class given by the row code.. I just want to scroll it to particular class. The scroll is for the particular div.which i need to go to particular class inside table

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>

Upvotes: 3

Views: 999

Answers (2)

Vignesh Raja
Vignesh Raja

Reputation: 8751

You need scrollIntoView(options) to scroll the element into the view. Refer the docs for how to pass options object and for browser compatibility.

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>

Upvotes: 1

Shaik
Shaik

Reputation: 378

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

       top.location.href = '#radio3';

    });
</script>

I think it is heplful to you

Upvotes: 0

Related Questions