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