Login/Register
Simple Internal Links not working
Asked Answered
Solved htmlanchorinternal-link
N

5

8

This should be pretty straightforward, I am trying to create a "Table of Contents" that links to various parts of a long page...

This is what I tried:

<ul>
      <li><a href="#features">Features</a></li>
</ul>

Further down in the page...

<a name="features"></a>

Am I missing something? It simply never links as if the anchor is not linked properly.

I appreciate any advice in this regard.

Many thanks in advance!

Nerynesbit answered 5/6, 2013 at 15:38 Comment(0)
N
4

To those having a similar problem, I found out why it was not working.

Many elements on my page are floating elements. As a result, the browser cannot find a precise point to link to if the anchor target is not within a floated element. In other words, if the anchor tag is outside a floating element, and you have many floating elements on your page, internal links may not work properly. To fix this, place your anchor target within one of the floating elements.

Nerynesbit answered 5/6, 2013 at 16:4 Comment(1)
Thanks a lot. I had to put my anchor name link, at the top of the page, as that is where I needed to go, was back to the top. Thanks, George. – Immorality
T
0

I also found this information here

Many times you will see people who use these links without surrounding anything (e.g. <a name="1" id="1"></a>), but this is not as reliable an anchor as when you surround a word or image. Many browsers like to have some element to position at the top of the screen, and when you enclose nothing, you run the risk that the browser will be confused.

Turki answered 5/6, 2013 at 16:8 Comment(0)
A
0

I was having the same issue as you and this fixed it for me:

    <a href="#ref" onclick="window.location.href = '#ref';">link content here</a>
Ayers answered 27/3, 2020 at 0:36 Comment(0)
P
0

Seems to Work Using <slot>s

Without <slot>s (does NOT work)

index.html
<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <my-app></my-app>
    </body>
</html>
my-app.html
<element id="ref"></element>

With <slot>s (DOES work)

index.html
<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <my-app>
            <element id="ref" slot="ref"></element>
        </my-app>
    </body>
</html>
my-app.html
<slot name="ref"></slot>
Polymerize answered 29/1, 2024 at 4:41 Comment(0)
S
-4

This is not the way to scroll to a particular part of a web page. You need some JavaScript code here.

function scrollWindow() {
    window.scrollTo(x,y);
    // where
    // x = for horizontal co-ordinates, y = for vertical cordinates
    // e.g. x=100,y=600 -- try this
}

execute this function onclick of your link

<ul>
  <li><a href="#features" onclick="scrollwindow();">Features</a></li>
</ul>

This page explains the property very well: http://www.w3schools.com/jsref/met_win_scrollto.asp

Stephen answered 5/6, 2013 at 16:7 Comment(3)
Thanks for the reply. Javascript is not necessary here, unless you want some scroll animation. Plain HTML should work perfectly in this instance, without Javascript. – Nerynesbit
its always your choice,but some transition properties in css would do wonders to user experience. – Stephen
The question was not how to "scroll to a particular part of a web page" but to get to the section with an internal hyperlink. – Muscat

© 2022 - 2025 — McMap. All rights reserved.