如何给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