偏移锚点后无法点击的文本

Question

我的页面顶部有一个“转到”工具栏，以便跳转到我正在显示的表格的不同部分。 我遇到了一个 href 向下滚动太远的问题，所以我使用 css 来抵消它

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

这确实解决了我滚动到远处的问题，但它现在导致了另一个问题，如果由于填充和边距偏移，我无法单击文本/复制和粘贴文本。 我尝试在 css class 中应用 z-index 并且我尝试使用 javascript 滚动，但随后它再次向下滚动太远。

这是我使用的 javascript 的示例：

$('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;
    });
});

我该如何解决这个问题？

以下是一些代码片段：

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

Answer 1

请原谅我，但我看到的阻止滚动的代码的唯一问题是href='#two' 是 href='two' 和 href='#three' 相同的是 href='three' 。 对 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>