Hướng dẫn html button link to same page - nút html liên kết đến cùng một trang

Điều này giả định rằng bạn không nói về việc cuộn xuống một mỏ neo thông thường và thay vào đó bạn muốn cuộn đến các phần tử HTML thực tế trên trang.

Tôi không chắc jQuery có tính cho bạn không, nhưng nếu bạn đang sử dụng bootstrap, tôi tưởng tượng nó có. Nếu vậy, bạn có thể liên kết với sự kiện "Nhấp" cho nút của mình và đặt một số mã JavaScript ở đó để xử lý việc cuộn. Thông thường, bạn có thể liên kết nút/nút với phần tử bạn muốn cuộn đến bằng cách sử dụng thuộc tính "dữ liệu" (ví dụ: dữ liệu-scroll = "My-breement-id").

Không có jQuery, bạn sẽ phải tạo một hàm chứa mã như được mô tả và đặt thuộc tính onclick tham chiếu chức năng của bạn và truyền "cái này" như một tham số cho chức năng của bạn, để bạn có thể nhận được tham chiếu đến liên kết /phần tử nút gọi nó.

Để mã sử dụng để thực sự cuộn đến phần tử tương ứng, hãy xem bài viết này:

Làm thế nào để đi đến một yếu tố cụ thể trên trang?

Ví dụ nhanh mà không có jQuery:

something on page

scrolls to here when you click on the link above

Với jQuery:

something on page

scrolls to here when you click on the link above

Lưu ý: Nếu bạn thực sự muốn một "nút" thay vì "liên kết", bạn thực sự có thể sử dụng bất kỳ yếu tố nào và thực hiện có thể nhấp, ví dụ:

something on page

Khi hầu hết mọi người nghĩ về các siêu liên kết, họ nghĩ đến việc kết nối hai trang web khác nhau - chẳng hạn như một blog và trang đích - cùng nhau. Nhưng đó không phải là tất cả các siêu liên kết đều có thể làm, họ cũng có thể liên kết để nhảy đến một phần cụ thể của một trang.

Vì vậy, hãy nhớ rằng thuật ngữ thực sự đầy đủ mà bạn tập hợp với các điều khoản trong ngành mà khán giả của bạn nên biết? Bây giờ, khi bạn đề cập đến một cái gì đó bạn đã nói ở nơi khác trong bài viết đó, bạn thực sự có thể liên kết với nó - giúp khán giả của bạn dễ dàng tìm ra cái quái gì bạn đang nói. Bạn muốn xem ý tôi là gì? Chỉ cần bấm vào đây.

Khá tuyệt, phải không? Phần tốt nhất về tất cả là nó rất dễ dàng để tự làm, ngay cả khi bạn không có kiến ​​thức HTML rộng rãi. Nếu HTML-speak cảm thấy khó hiểu, chỉ cần làm theo cùng với các ví dụ trong thế giới thực bên dưới.

Lưu ý: Nếu bạn là khách hàng HubSpot, hãy làm theo các hướng dẫn này.follow these instructions.

Cho phép mọi người "nhảy" một cách hiệu quả đến một phần nhất định của trang web có thể giúp doanh nghiệp của bạn phát triển tốt hơn và làm cho nội dung của bạn thuận tiện hơn cho khách truy cập vào trang web của bạn - nhưng bạn phải đảm bảo rằng bạn làm mọi thứ vừa phải. Đây là cách thêm các liên kết nhảy vào nội dung của bạn, từng bước.

1. Đặt tên cho đối tượng hoặc văn bản bạn muốn liên kết đến.

Trong một kịch bản liên kết bình thường, bất cứ điều gì bạn cần liên kết để có một URL của riêng nó. Tuy nhiên, trong kịch bản này, bạn không liên kết với một trang mới với URL của riêng nó - vì vậy bạn phải tạo ra một tên cho điểm đến của liên kết.

Tôi khuyên bạn nên sử dụng một từ hoặc cụm từ mô tả đích của liên kết. Nếu bạn sử dụng một cụm từ, hãy sử dụng nhấn mạnh giữa mỗi từ thay vì khoảng trống, nếu không mã sẽ không hoạt động.

Thí dụ

Giả sử chúng tôi muốn liên kết đến một ví dụ về một công ty sử dụng quảng cáo Facebook trong một bài đăng. Đây là những gì tôi sẽ sử dụng làm tên của đối tượng của tôi:

facebook_ads_example

Bây giờ, vào bước tiếp theo.

2. Lấy tên bạn đã chọn và chèn nó vào thẻ liên kết neo HTML mở.HTML anchor link tag.

Nói cách khác, thay thế phần màu đỏ của thẻ bên dưới bằng tên bạn đã chọn trong bước trước:

Thí dụ

3. Đặt thẻ mở hoàn chỉnh từ trên cao trước văn bản hoặc đối tượng bạn muốn liên kết đến và thêm thẻ đóng sau.

Làm điều này đặt vị trí của liên kết. Đây là những gì mã của bạn sẽ trông như bây giờ:

Đối tượng bạn muốn liên kết đến.The object you want to link to.

Thí dụ

 
This is the Facebook ad example I want to link to.

4. Tạo siêu liên kết sẽ đưa bạn đến văn bản hoặc đối tượng đó.

Bây giờ, đi đến một phần của bài đăng bạn muốn có siêu liên kết. Bạn sẽ cần thêm một bản đánh dấu HTML siêu liên kết điển hình, nhưng trong phần mà bạn thường bao gồm một URL, bạn sẽ bao gồm Biểu tượng (#) sau đó tên của đối tượng bạn đang liên kết. Đây là những gì nó trông giống như:

Nhấn vào đây để xem nội dung dưới đây.a href="#INSERT_YOUR_OBJECT_NAME_HERE">Click here to see the content below.a>

Thí dụ

 
Click here to see an example of how a company uses Facebook ads.

Và sau đó bạn đã thiết lập tất cả - bạn có một siêu liên kết hoạt động giữa hai phần nội dung trên cùng một trang. Đơn giản như thế.

(Này, những người tò mò từ phần giới thiệu! Nhấn vào đây để quay lại nơi bạn rời đi.) to go back to where you left off.)