CODEWITHSUNDEEP
htmlcssanchoranchor-scroll
Nathan Wilson
Nathan Wilson

Reputation: 179

Anchor points in HTML

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.

Upvotes: 5

Views: 9588

Answers (3)

DevSkyWalker
DevSkyWalker

Reputation: 146

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:5551239876">make call (555)123-9876</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!

Upvotes: 9

Peter
Peter

Reputation: 624

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>

Upvotes: 2

Djamel
Djamel

Reputation: 818

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>

Upvotes: 2

Related Questions