如何给链接提供html id

Question

单击页码时如何为每个页面提供ID，例如：

www.example.com

当我按第4页时，链接变为www.example.com#page4 页面跳到顶部。

Fiddle上的代码

HTML：

<div class="full">
  <table class="flat-table flat-table-2" width="70%" style="margin:auto;">
    <thead>
      <tr>
        <th>numbers</th>
        <th>address</th>
      </tr>
    </thead>
    <tbody id="page1">
      <tr>
        <td>1-3</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>5</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
    </tbody>
    <tbody id="page2" class="hidden">
      <tr>
        <td>2-3</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>5</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
    </tbody>
    <tbody id="page3"  class="hidden">
      <tr>
        <td>3-3</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>5</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="#">test</a>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="footer-pop">
    <a href= "#" data-id="page3"class="pages">3</a>
    <a href= "#" data-id="page2"class="pages">2</a>
    <a href="#" data-id="page1"class="pages">1</a>
  </div>
</div>

Answer 1

由于您使用的是jQuery，因此可以使用animate函数来操作滚动位置。这是处理该功能的函数。

$('a').on('click', function(e) {

    $('html, body').animate({

        scrollTop: 0

    }, 500);

});

Working Fiddle