htmlcssanchoranchor-scroll

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.


Solution

  • 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>