Liên kết đến một phần tử trong trang hiện tại

Question

Tôi đã tạo một trang HTML với một số bảng có tiêu đề như sau: Nội dung, Main_Page, Tài liệu, Chi phí, v.v.

Tôi muốn tạo liên kết cho đầu trang. Khi tôi nhấp vào liên kết đó, nó sẽ đi đến phần cụ thể. Vì vậy, tôi sử dụng mã bên dưới để ánh xạ nội dung. Nhưng nó không làm việc cho tôi.

<a href="#Content">Content Section</a> 

Answer 1

Bạn cần tạo neo cho liên kết. Cách hiện đại để làm điều này là cung cấp cho phần tử thích hợp thuộc tính id="Content". Cách làm cũ hơn là sử dụng <a name="Content"></a>.

Answer 2

Đưa các yếu tố bạn muốn 'nhảy' vào một ID rõ ràng, như vậy:

<p id="idOfTag">Your content goes here</p> 

Sau đó, trong liên kết trên đầu trang, làm cho nó tham khảo các id của nguyên tố đó (nhớ các #):

<a href="#idOfTag">Jump</a> 

Ví dụ đầy đủ với nhiều liên kết:

<ul> 
 
    <li><a href="#contentParagraph">Content</a></li> 
 
    <li><a href="#mainPageParagraph">Main page</a></li> 
 
    <li><a href="#documentParagraph">Document</a></li> 
 
    <li><a href="#expensesParagraph">Expenses</a></li> 
 
</ul> 
 
<p id="contentParagraph"> 
 
    <h4>Content</h4> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p> 
 
<p id="mainPageParagraph"> 
 
    <h4>Main page</h4> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p> 
 
<p id="documentParagraph"> 
 
    <h4>Document</h4> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p> 
 
<p id="expensesParagraph"> 
 
    <h4>Expenses</h4> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p>

Answer 3

Bạn có thể sử dụng thuộc tính name cho thẻ anchor của mình để đạt được điều này.

Hãy nói rằng bạn có một div với id content

<div id="content">This is my div</div> 

Tiếp chắc chắn rằng bạn có một thẻ anchor với name thuộc tính giống như id của divcontent

<a href="#" name="content">Click to go to the top</a> 

Live Demo.

Cuộn xuống để xem liên kết

Một cách khác để làm điều này sẽ

<div id="content">My div</div> 

Sau đó href thẻ neo của bạn nên đượC# content

<a href="#content">Click to go to top</a> 

Live Demo.

Answer 4

vẻ như câu hỏi đã được trả lời nhưng nếu bạn muốn sử dụng cuộn giấy có hiệu lực khi chuyển sang các yếu tố ở đây một chút JS snipt. $ (function() {

function filterPath(string) { 
     return string 
     .replace(/^\//,'') 
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
     .replace(/\/$/,''); 
    } 

    var locationPath = filterPath(location.pathname); 
    var scrollElem = scrollableElement('html', 'body'); 

    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential) 
    $('a[href*=#]').each(function() { 

     // Ensure it's a same-page link 
     var thisPath = filterPath(this.pathname) || locationPath; 
     if ( locationPath == thisPath 
      && (location.hostname == this.hostname || !this.hostname) 
      && this.hash.replace(/#/,'')) { 

       // Ensure target exists 
       var $target = $(this.hash), target = this.hash; 
       if (target) { 

        // Find location of target 
        var targetOffset = $target.offset().top; 
        $(this).click(function(event) { 

         // Prevent jump-down 
         event.preventDefault(); 

         // Animate to target 
         $(scrollElem).animate({scrollTop: targetOffset}, 2000, function() { 

          // Set hash in URL after animation successful 
          location.hash = target; 

         }); 
        }); 
       } 
     } 

    }); 

    // Use the first element that is "scrollable" (cross-browser fix?) 
    function scrollableElement(els) { 
     for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
      var el = arguments[i], 
      $scrollElement = $(el); 
      if ($scrollElement.scrollTop()> 0) { 
       return el; 
      } else { 
       $scrollElement.scrollTop(1); 
       var isScrollable = $scrollElement.scrollTop()> 0; 
       $scrollElement.scrollTop(0); 
       if (isScrollable) { 
        return el; 
       } 
      } 
     } 
     return []; 
    } 

});