Anchor points in HTML

Question

I'm fairly basic when it comes to coding websites, but I wanted to incorporate anchor points in to my horizontal scrolling website. I've had a go but it isn't working.

Below is the code I've tried - I'm not sure if it's something to do with my navbar not being the standard <li> instead im using separate divs. I will include an image of how i'm designing the site so that you can understand the concept.

HTML:

<div id="navbar">
    <div class="tab1" href="#home">
        <div class="text1">Home</div>
    </div>
    <div class="tab2" href="#work">
        <div class="text2">Work</div>
    </div>
    <div class="tab3" href="#about">
        <div class="text3">About</div>
    </div>
</div>

<div id="container">

  <div id="fullscreen">

    <div class="box home" id="home">

    <div class="heading">
        <h1>Hi,</h1>
        <h2>I'm Nathan Wilson</h2>
        <h3>a Graphic Designer based in Nottingham, U.K.</h3>
    </div>

    </div>

    <div class="box work" id="work">

    </div>
    <div class="box about" id="about">

    </div>
  </div>
</div>

Image: https://i.sstatic.net/SEdiy.jpg

I want to incorporate smooth scrolling eventually, but that's something I'll look in to once i've fixed this issue.

Hanley

For smooth scrolling you'll need JS. For the horizontal anchor scrolling, maybe this helps? Disclaimer: I'm not the author. – Antlia

If you want an anchor, use an anchor element... – Hanukkah

Answer 1

Your doing it right, except that you have to use <a> balise instead of <div>

<a class="tab1" href="#home">
    <div class="text1">Home</div>
</a>

Brougham

Welcome to SO, please provide a full example, not a snippet which is not usable. – Lemmuela

Answer 2

Anchor points work due to property binding the tag elements as follow

<a href="#anchor-point-1">Where You Click!</a> 

<a name="anchor-point-1"></a> 

So #anchor-point-1 is the property element that binds to the NAME of the anchor tag which you can place anywhere in your markup vertically or horizontally depending on how you are styling your app.

you can do multiple anchor tags as follows for a tabs like template

<a href="#anchor-point-tab-1">Where You Click!</a> 

<a name="anchor-point-tab-1"></a> 

<a href="#anchor-point-tab-2">Where You Click!</a> 

<a name="anchor-point-tab-2"></a> 

It doesn't matter what you name the tags as long as your original link and the anchor have the same binding element HREF = the same NAME property.

You can also bind the elements to divs, spans, and other tags for these types of visual and scrolling effects

For internal anchoring attributes

There are three anchor attributes you need to know to create functional hyperlinks. These attributes are href, target, and download.

These are considered anchors as well but do not bind one tag to another!

Anchor 1: mailto:
<a href="mailto:[email protected]">

Anchor 2: tel:
<a href="tel:[phone]">make call [phone]</a>

Anchor 3: target="_blank"
<a href="https://test.com" target="_blank">

To learn about the dynamics and inner working of all the attributes of A href tags please go to the link below.

https://html.com/anchors-links/

hope this is sufficient!

Rarely

Welcome to SO, there is big mistake in your answer. Nobody realized this important issue so far, you have to link to the id attribute and not the name attribute to jump on the site between anchors. – Lemmuela

Answer 3

You are close. Instead of wrapping your <div> within a <div class="tab1" href="#home"> you need to use the anchor tag <a href="#">Test</a>. Try this.

<div id="navbar">
	<div class="tab1">
		<a href="#home" class="text1">Home</a>
	</div>
	<div class="tab2">
		<a href="#work" class="text2">Work</a>
	</div>
	<div class="tab3">
		<a href="#about" class="text3">About</a>
	</div>
</div>

<div id="container">

	<div id="fullscreen">

		<div class="box home" id="home">

			<div class="heading">
				<h1>Hi,</h1>
				<h2>I'm Nathan Wilson</h2>
				<h3>a Graphic Designer based in Nottingham, U.K.</h3>
			</div>

		</div>

		<div class="box work" id="work">
			Work Content
		</div>
		<div class="box about" id="about">
			About Content
		</div>
	</div>
</div>

Injection

Going to the links in your embedded example does not work. – Lemmuela