My <a hrefs does not send me to elements within my document

Question

Ok, so I am making a one-pager with 4 different 'pages'. Everything was working normally before, I was referring to elements on the page that had an ID in CSS, and it worked like a charm.

However, now it does not. It does move me somehow, but never correct, and the weirdest thing is that it varies for each time!

This is how my menu look like.

<a href="#one" class="smoothScroll"> Kom i gang </a></li> <a href="#two" class="smoothScroll"> Utstyr</a> </li> <a href="#three" class="smoothScroll"> Oppskrifter</a> </li> <a href="#four" class="smoothScroll"> Kontakt </a></li>

This is how one of the elements I am linking to look like in CSS:

#two { position: absolute; height: 120%; top: 275%; z-index: 1000; width: 100%; border-top: 4px #444444 outset; border-bottom: 4px #444444 outset; background-color: #C7A066; color: #ffffff; background-image: url('../img/pattern.png'); }

I hope somebody can help me :-) It's quite annoying!

tl;dr the links does not seem to take me to the element i'm referring to. what has gone wrong?

And where are the elements that have an id of one or two...? — Abhitalks
– Abhitalks, Commented Nov 21, 2014 at 11:47
They are sections within the body element, like this: <body> <section id="one"> </section> </body> — Joakim Vindenes
– Joakim Vindenes, Commented Nov 21, 2014 at 11:54
This works fine for me? jsfiddle.net/p3a701nq Can you put your code in a jsfiddle? — Stefan
– Stefan, Commented Nov 21, 2014 at 11:56

Community · Accepted Answer · 2017-05-23 12:05:46Z

You can use either ID Selector in CSS or class selector. If you go with both then selector preferences matters.

1. ID Selector:

<a href="#one" id="one"> Kom i gang </a></li>

CSS:

 #one { position: absolute; height: 120%; top: 275%; z-index: 1000; }

2. Class Selector:

<a href="#one" class="smoothScroll"> Kom i gang </a></li>

CSS:

.smoothScroll { position: absolute; height: 120%; top: 275%; z-index: 1000; }

CSS Selectors and for selector precedence

What does "selector preferences" mean? Why would this have anything to do with the behavior of clicking on a link and jumping somewhere?
I'm sorry, smoothScroll is javascript that makes it scroll smoothly. I'm only using ID Selector.

Collectives™ on Stack Overflow

My <a hrefs does not send me to elements within my document

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related