Pergunta

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!

Foi útil?

Solução

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.

Outras dicas

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.

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>

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

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top