Простые внутренние ссылки не работают

Question

Это должно быть довольно просто, я пытаюсь создать "оглавление", которое ссылается на различные части длинной страницы...

Вот что я попробовал:

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

Далее вниз на странице...

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

Я что-то пропустил? Он просто никогда не связывает, как будто якорь не связан должным образом.

Я ценю любые советы на этот счет.

Спасибо заранее!

Answer 1

Тем, у кого была похожая проблема, я узнал, почему она не работает.

Многие элементы на моей странице являются плавающими элементами. В результате браузер не может найти точную точку для ссылки, если цель привязки не находится в плавающем элементе. Другими словами, если тег привязки находится за пределами плавающего элемента и у вас на странице много плавающих элементов, внутренние ссылки могут работать неправильно. Чтобы это исправить, поместите вашу якорную цель в один из плавающих элементов.

Answer 2

Я также нашел эту информацию здесь

Много раз вы будете видеть людей, которые используют эти ссылки, ничего не окружая (например, <a name="1" id="1"></a>), но это не такой надежный якорь, как когда вы окружаете слово или изображение. Многим браузерам нравится иметь какой-то элемент в верхней части экрана, и когда вы ничего не заключаете, вы рискуете запутаться в браузере.

Answer 3

У меня была та же проблема, что и у вас, и это исправило ее для меня:

    <a href="#ref" onclick="window.location.href = '#ref';">link content here</a>

Answer 4

Это не способ прокрутки к определенной части веб-страницы. Вам нужен код JavaScript здесь.

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

выполнить эту функцию по клику вашей ссылки

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

Эта страница очень хорошо объясняет свойство: http://www.w3schools.com/jsref/met_win_scrollto.asp