登录查看更多内容

全部
HTML

How do you link to anchors within the same document using (#)?

由人工智能和领英社区提供技术支持

Have you ever wanted to create links that take your readers to different sections within the same document? This can be useful for long articles, guides, or tutorials that have multiple topics or subheadings. In this article, you will learn how to use the (#) symbol to link to anchors within the same document using HTML.

此文章中的业界达人

由社区从 30 条内容中精选。了解更多

Jean-Philippe Paradis

20+ years programming, 15+ years Common Lisp, 10+ years Common Lisp Open Source. Common Lisp is the best programming…
FALADE Ben A. Basty

Frontend Developer | HTML ? CSS ? JAVASCRIPT ? REACT.JS
David Morales

Technical Lead @ SPOTLIO | Ruby on Rails

1 What are anchors?

Anchors are special elements in HTML that mark a specific location or point in a document. They have an attribute called id, which gives them a unique identifier. You can use this id to refer to the anchor from other parts of the document or from other documents. For example, <a id="top"></a> creates an anchor with the id "top".

添加您的观点

Jean-Philippe Paradis

20+ years programming, 15+ years Common Lisp, 10+ years Common Lisp Open Source. Common Lisp is the best programming language in the world! Let's make it the most popular! Great Common Lisp Revival is coming before 2030!
举报内容
Using the A element for demonstrating the ID attribute is unnecessarily confusing, as A is usually used to reference an anchor, not define one. <section id="my-section"> would be better, for instance.

已翻译

赞
Faheem Sharif

Principal Front End Developer at SoloInsight Inc.
举报内容
Here's how you can navigate to a section or a block of same page. <a href="#myId">...</a> <section id="myId"> ... </section> There is no need to give id to anchor element unless you are not doing some JavaScript funcnality. And if you add a little animation to the scroll that would look better.

已翻译

赞
Jeff Claybrook

Product Manager at Arena Edge
举报内容
HTML: <a href="#about">Click me</a> <section id="about">Some content</section> CSS (optional): body { scroll-behavior: smooth; }

已翻译

赞
Muhammad Qasim

Elevate Your Projects with a Proven Full Stack Developer: C#, ASP.NET Core, Angular, SQL, Azure, and AWS Expertise
举报内容
Creating internal links within the same document using HTML anchors is a handy way to improve navigation in long articles or tutorials. You can use the # symbol followed by an anchor name to create these links. For example: <a href="#section1">Jump to Section 1</a> <h2 id="section1">Section 1</h2> This allows readers to easily jump to specific sections of your document

已翻译

赞
Kuldeep Negi

Full-Stack Web Developer | PHP | MEAN | MERN | Shopify | WordPress | CMS Development
举报内容
Utilizing the <a> element's href attribute with the '#' symbol followed by an anchor's ID like this: <a href='#top'>Go to top</a> allows seamless navigation within the same document. This enhances user experience and is a neat trick for long articles and documentation. You can also use JavaScript to create smooth scrolling effects, further improving navigation.

已翻译

赞

加载更多内容

2 How to link to anchors?

To link to an anchor, you need to use the <a> element, which creates a hyperlink. The href attribute of this element specifies the destination of the link. To link to an anchor within the same document, you need to use the (#) symbol followed by the id of the anchor. For example, <a href="#top">Go to top</a> creates a link that takes the reader to the anchor with the id "top".

添加您的观点

FALADE Ben A. Basty

Frontend Developer | HTML ? CSS ? JAVASCRIPT ? REACT.JS
举报内容
The href attribute is used in this case. It specifies the URL of the page the link goes to. To link to an anchor within the same document, with the href attribute, you need to use the (#) symbol followed by the id of the anchor. For example, <a href="#top">Go to top</a> creates a link that takes the reader to the anchor with the id "top".

已翻译

赞
Dayle Senior

Front-end Developer at D2L
举报内容
Following on from Falade’s anchor link example, by simply adding a class to the page’s HTML and one line of code to your CSS, you can add smooth scrolling between the various anchor points on the page instead of it instantly jumping to the particular anchor. For example: <html class=“smooth-scroll”> <body> <a href=“#section-1”>Click to jump to Section 1</a> <a href=“#section-2”>Click to jump to Section 2</a> <h2 id=“section-1”>Hello World!</h2> <h2 id=“section-2”>End of the World!</h2> </body> </html> And then the CSS: .smooth-scroll {scroll-behavior: smooth;}

已翻译

赞
Ayomi Gunasekara

Project Manager | FinTech Solutions | Scrum Master
举报内容
The href attribute is used in this case. It specifies the URL of the page the link goes to. To link to an anchor within the same document, with the href attribute, you need to use the (#) symbol followed by the id of the anchor. For example, <a href="#top">Go to top</a> creates a link that takes the reader to the anchor with the id "top".

已翻译

赞
Mazhar Hussain

Software Developer @ SORINT.lab | Transforming Client Ideas into Functional Web & Mobile Apps
举报内容
We can also use 'useRef' hook and 'scrollTo' in React to make a 'scroll to top' feature. function ScrollToTopButton() { // Create a ref using useRef const myRef = useRef(null); // Function to scroll to the top const scrollToTop = () => { myRef.current.scrollTo({ top: 0, behavior: 'smooth', // You can use 'auto' for an instant scroll }); }; return ( <div> <button onClick={scrollToTop}>Scroll to Top</button> <div ref={myRef}> {/* Content that you want to scroll */} {/* ... */} </div> </div> ); } export default ScrollToTopButton;

已翻译

赞
Kamlesh Kumar

Founder YatraMaker | #TravelTech #Hospitality
举报内容
Well, in #React , i have also used, <ScrollLink> to achieve a smooth scrolling to same page section via a button. <ScrollLink to="benefits-section" smooth={true} duration={500} className="secondary-button"> Learn more </ScrollLink>

已翻译

赞

加载更多内容

3 How to style anchors?

You can use CSS to style your anchors and links to make them more attractive and visible. You can change the color, font, size, decoration, and hover effects of your anchors and links using various properties. For example, a {color: blue; text-decoration: underline;} makes all links blue and underlined. You can also use pseudo-classes like :link, :visited, :hover, and :active to apply different styles depending on the state of the link.

添加您的观点

David Morales

Technical Lead @ SPOTLIO | Ruby on Rails
举报内容
Anchors can be any element of the DOM. For example an H2, and they have to define an ID. So, I think this example can be confusing. If we want to style the anchors, we can assign a common class, and style this class.

已翻译

赞
Faheem Sharif

Principal Front End Developer at SoloInsight Inc.
举报内容
There is another CSS pseudo-class for anchors that's important to know: 'a:focus'. This will highlight or change the style when a user focuses on an anchor using the keyboard tab key or mouse.

已翻译

赞
Anton Roters

Software Developer | TypeScript | React | Java | Spring | Python
举报内容
Apart from the default style setting which gives anchor elements the typical blue color with an underline it is possible to make links distinguishable from normal text by using a different background color and/or font color while removing the underline. While it is possible to make links out of other HTML elements as well, it is considered good practice to use anchor elements for the sake of accessibility.

已翻译

赞
Ethan Sylvester

Full Stack Software Engineer | Mobile and Web
举报内容
This is probably more of an outdated practice that would be used to help keep pages more organized, if it were ever a practice at all. Although completely possible, most pages have desigs that will provide each section of the page (that might have an anchor) the needed context so that a styled anchor (which would probably be some sort of heading) is not needed. You could perhaps find a way to style your anchors but more likely you would style the element seperately rather than styling all anchors to be the same

已翻译

赞

4 How to create a table of contents?

Creating a table of contents for your document often involves anchors and links. To create one, you need to create anchors for each section or heading, giving them meaningful ids that match the content. Then, create a list of links that point to the anchors using the (#) symbol and the ids. You can use an ordered or unordered list element ( <ol> or <ul> ) to structure your table of contents. Lastly, place the table of contents at the beginning of your document or in a sidebar or navigation menu, depending on your design and preference.

添加您的观点

David Morales

Technical Lead @ SPOTLIO | Ruby on Rails
举报内容
Example: <h2>Table of contents</h2> <ul> <li><a href="#introduction">Introduction</a></li> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> </ul>

已翻译

赞

5 How to test your anchors and links?

After creating your anchors and links, you should test them to make sure they work as expected. You can do this by clicking on the links and checking if they take you to the correct location in the document. You can also use the browser's back and forward buttons to navigate between the links. If you find any errors or broken links, you should fix them by checking the spelling and syntax of your ids and hrefs.

添加您的观点

Luiz Carneiro

PhD in Physics | Full-stack Developer | GDG Organizer
举报内容
It is written in the article, but it is good to emphasize that IDs must be unique. This is also helpful for the tests, mainly if those are automatized. Not having a unique ID doesn't produce necessarily an error in the HTML, but can afterward produce different sorts of strange behaviors hard to track the source.

已翻译

赞
Karin S.

Web Developer at Inetex LTD
举报内容
I agree with the above, but important thing to keep in mind that your id must be unique for each case, otherwise it won’t work correctly.

已翻译

赞

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

David Morales

Technical Lead @ SPOTLIO | Ruby on Rails
举报内容
CSS supports smooth scrolling, and can be enabled for a specific container or the whole document. Here's an example: html { scroll-behavior: smooth; } For users with reduced motion enabled in their browser, you can respect that and disable it by adding this: @media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

已翻译

赞
Cathy Z. Wang

Digital Strat. Marketing | Campaign Management | Crag Climber ??♀? | Culinary Wizard ??♀? ??
举报内容
I also discovered if the page is already built and as an email developer we utilize “inspect” to tag the specific sections as well. If you can inspect a page and hover your mouse over the section you want to anchor to, you can drop down the section and discover imbedded ids to use in your anchor.

已翻译

赞

HTML

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How do you link to anchors within the same document using (#)?

1

2

3

4

5

6

1 What are anchors?

2 How to link to anchors?

3 How to style anchors?

4 How to create a table of contents?

5 How to test your anchors and links?

6 Here’s what else to consider

HTML

给文章评分

感谢您的反馈

更多HTML相关文章

更多相关阅读内容