Forgive me, but the only problem I saw with the code which prevents scrolling is href=’#two’ was href=’two’ and same for href=’#three’ was href=’three’. Use the following line for the GO TO…:

<span>GO TO:</span><span><a href='#one'>One</a></span> <span><a href='#two'>Two</a></span> <span><a href='#three'>Three</a></span>

I have a “GO TO” toolbar at the top of my page in order to jump to different sections of my a table that I am displaying. I was having an issue of the href scrolling too far down so I’ve offset it with css using

padding-top: 150px;
margin-top: -150px;

This did fix my scroll to the far issue, but it has now caused another issue where if I unable to click on the text / copy and paste the text due to the padding & margin offset. I’ve tried applying a z-index in the css class and I’ve tried scrolling using javascript but then it scrolls too far down again.

Here is an example of the javascript that I used:

$('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    var target = this.hash;
    var $trget = $(target);
    // Example: your header is 70px tall.
    var newTop = $trget.offset().top - 150;
    $('html, body').animate({
        scrollTop: newTop
    }, 500, 'swing', function () {
        window.location.hash = target;
    });
});

How can I resolve this issue?

Here are some code snippets:

<span>GO TO:</span><span><a href='#one'>One</a></span> <span><a href='two'>Two</a></span> <span><a href='three'>Three</a></span>

<table>
        <thead>
          <tr>
              <th>Name</th>
              <th>Item Name</th>
              <th>Item Price</th>
          </tr>
        </thead>

        <tbody>
        <td>
          <a id='one'>One</a>
        </td>
          <tr>
            <td>Helen</td>
            <td>Eclair</td>
            <td>$0.87</td>
          </tr>
          <tr>
            <td>Ben</td>
            <td>Jellybean</td>
            <td>$3.76</td>
          </tr>
          <tr>
            <td>Jim</td>
            <td>Lollipop</td>
            <td>$7.00</td>
          </tr>
          <td>
          <a id='two'>Two</a>
        </td>
        <tr>
            <td>Helen</td>
            <td>Eclair</td>
            <td>$0.87</td>
          </tr>
          <tr>
            <td>Ben</td>
            <td>Jellybean</td>
            <td>$3.76</td>
          </tr>
          <tr>
            <td>Jim</td>
            <td>Lollipop</td>
            <td>$7.00</td>
          </tr>
          <td>
          <a id='three'>Three</a>
        </td>
        </tbody>
      </table>

CSS

table tbody tr a {
  color: red
 padding-top: 150x;
margin-top:-150px
}