I have an HTML code, having a big table. and I need to scroll to access all of the rows.

And I made the thead as a sticky tag. because I need this tag everywhere. (position: sticky; top: 0;)

But, when I want to use firstCell.scrollIntoView(); in JavaScript, firstCell will be covered by thead!

You can see the sample in this link

In this example, the Target is the first cell in the Table, and by clicking the button, it has to scroll into view of the Target

but Target will be at the backside of thead

how can I fix this problem?

I have an HTML code, having a big table. and I need to scroll to access all of the rows.

And I made the thead as a sticky tag. because I need this tag everywhere. (position: sticky; top: 0;)

But, when I want to use firstCell.scrollIntoView(); in JavaScript, firstCell will be covered by thead!

You can see the sample in this link

In this example, the Target is the first cell in the Table, and by clicking the button, it has to scroll into view of the Target

but Target will be at the backside of thead

how can I fix this problem?

• javascript
• html
• css
• html-table

Share Improve this question Follow edited Feb 12, 2022 at 16:15 Christian Vincenzo Traina 10.5k44 gold badges4545 silver badges7878 bronze badges asked Feb 12, 2022 at 16:07 MHSarmadiMHSarmadi 11211 silver badge99 bronze badges 3

• Does this answer your question? scrollIntoView Scrolls just too far – yuriy636 Commented Feb 12, 2022 at 16:10
• no, please open the link. – MHSarmadi Commented Feb 12, 2022 at 16:12
• you can use document.getElementById('target').scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); – Kaveh Karami Commented Feb 12, 2022 at 16:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Since the thead has a sticky position, its size doesn't get taken into account when calculating the available space.

A workaround would be using scrollIntoView({ behavior: 'smooth', block: 'end' }) in place of scrollIntoView().

This only works because the height of the thead is equal to the height of the tr, so if it aligns the scroll to the bottom, it's not covered anymore.

After scrolling into view, check if the bottom of the head overlaps the top of the target by taking their getBoundingClientRects. If so, call window.scrollBy by the difference.

const headTr = document.querySelector('thead tr');
document.querySelector('button').addEventListener('click', () => {
  const target = document.getElementById('target');
  target.scrollIntoView();
  const diff = target.getBoundingClientRect().top - target.getBoundingClientRect().bottom;
  if (diff < 0) {
    window.scrollBy(0, diff);
  }
});

<button style="position: fixed; top: 5px; right: 5px;">ScrollIntoView (for Target)</button>
<table>
  <thead>
    <tr style='position: sticky; top: 0;'>
      <td>XYZ</td>
      <td>XYZ</td>
      <td>XYZ</td>
      <td>XYZ</td>
      <td>XYZ</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id=target style="color: red;">Target</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    </tr>
  </tbody>
</table>

I've run into the same issue but found an article solving this issue with CSS. In my case, this was much easier to implement and handle.

If you append scroll-margin-top to a tag it will add the margin to that element automatically when scrollIntoView() is called.

#target{
  scroll-margin-top: 1rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
</head>
<body>
      <button onclick="document.getElementById('target').scrollIntoView();" style="position: fixed; top: 5px; right: 5px;">ScrollIntoView (for Target)</button>
      <table>
            <thead>
                  <tr style='position: sticky; top: 0;'>
                        <td>XYZ</td>
                        <td>XYZ</td>
                        <td>XYZ</td>
                        <td>XYZ</td>
                        <td>XYZ</td>
                  </tr>
            </thead>
            <tbody>
                  <tr>
                        <td id=target style="color: red;">Target</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
                  <tr>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
            </tbody>
      </table>
</body>
</html>