Menu
I have a landing page with links. How can I direct user to a section of a different page?
Main Page:
<a href="/sample">Sushi</a> <a href="/sample">BBQ</a> Sample Page:
<div id='sushi'></div> <div id='bbq'></div> Clicking on "Sushi" or "BBQ" in the Main Page should navigate the user to the div with id sushi or bbq (respectively) of the page sample.
Is it possible without JQuery? I do not mind using JQuery but a simpler solution using html would work too.
877
Method 1: Using HTML: One can use the anchor tag to redirect to a particular section on the same page. You need to add ” id attribute” to the section you want to show and use the same id in href attribute with “#” in the anchor tag.
Anchor target to navigate within the same page. By prepending your href with # , you can target an HTML element with a specific id attribute. For example, <a href="#footer"> will navigate to the <div id="footer"> within the same HTML document. This type of href is often used to navigate back to the top of the page.
Hyperlinks are utilized by a web browser to move from one page to another. However, you can also move to a different area on the same page. The following sections show you how to link to the top, bottom, or a specific section on a web page. Choose a method from the following list, or explore both options.
Use HTML's anchors:
Main Page:
<a href="sample.html#sushi">Sushi</a> <a href="sample.html#bbq">BBQ</a> Sample Page:
<div id='sushi'><a name='sushi'></a></div> <div id='bbq'><a name='bbq'></a></div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
