Link with "#" throws to top of page

[Romchick]

Having this issue often. Sometimes not. Can’t understand why it happens. Here is the code: http://codepen.io/NeedHate/pen/PwVMMb
If you click on “Click me” it goes to top. How to prevent it?

[Paulie_D]

You should (almost) never have href=”#”. It is a link to an undefined anchor (which will be the top of the page). People who use it normally do so because they want to dangle JavaScript off it.

If you don’t want a link to actually go somewhere there’s not much point in using a link.

Stack Overflow reference

[Romchick]

Well, I’m using :target to open block:
href=”#gotoblock”- link opens that target with id=gotoblock. Sometimes it works fine. And I don’t get it why. 8(

[Romchick]

I guess it’s because of html/body “height: 100%;”.

[Senff]

A link should point somewhere, and it should go to another location when you click on it. That’s simply by design.

What you want, is something to happen (not somewhere to go), so perhaps it would make more sense from a semantic point of view to use <button> instead.

[Paulie_D]

Links are not buttons

[Romchick]

Yeah, I understand that. But its some kind of css trick, because of “:target”. The link opens something that was invisible. I managed that already. If you click “Click me” it will open sub menus, like a checkbox. That is the goal. But when you put body/html height to 100% it throws :target to the top.

[Senff]

Well yea, but that’s kinda normal behavior. Links pointing to “#” will try to go to a point where an (empty) ID is defined, unless that behavior is overriden.

Don’t know what to tell you to be honest. If you use tricks that mess with a link’s normal behavior, you can expect abnormal/surprising results.

[Author]

Posts