Почему/причины не работают якоря на странице?

У меня на одной из страниц сайта, неожиданно отказались работать якоря! Т.е. ни один из поставленных якорей тупо не работал! Их(якорей...) там было много и я несколько раз искал и в интернете и на странице... в чём была причина отказа проходить к якорю!

Подробно о поиске неисправных якорей html.

1. Почему может не работать якорь на сайте?
2. Пример не работающего якоря на сайте.
3. Почему не работает якорь в данном примере.
4. Еще пример не работающих якорей.
5. Разбор примера не работающего якоря.
6. Как найти причину не работающего якоря.

Почему может не работать якорь на сайте?<

Как я уже в самом первом абзаце сказал, что такая странная ситуация произошла впервые, что тупо не работали якоря на странице.

Начнем с правильной установки якоря, не буду повторять теорию якорей, лишь в двух словах пример правильного якоря:

Ссылка с якорем, по которой нажимаем...:

<a href=#здесь_якорь>Перейди к якорю</a>

Ссылка с якорем, к которой перейдем:

<a id=здесь_якорь</a>

Либо :

<a name=здесь_якорь</a>
Приступим к тестированию работающего якоря:

Здесь разместим ссылку нежелательную, а внизу страницы якорную(и "id" и "name").Просто нажмите на ссылку...

Перейди к якорю



Мы вернулись... к описанию - если вы здесь, значит якоря работают.

Обратили внимание? При переходе к якорю перешли к "id". Вывод можно сделать, что предпочтения отдается id



Пример не работающего якоря на сайте.

Давайте на пальцах разберем пример неработающего якоря!

Создаем аналогичные ссылки, что и в первом пункте, но только на якорь с id постоим

style="display:none"

Кликабельная ссылка:

<a href=#здесь_якорь2>Перейди к якорю</a>

Не работающий якорь с id:

<a id=здесь_якорь2 style="display:none"></a>

А второй с "name" без display:none

<a name=здесь_якорь2 style="display:none"></a>

Аналогично располагаем ссылки... и протестируйте на работающий якорь:

Перейди к якорю



Почему не работает якорь в данном примере.

Выше пунктом вы видели реальный пример не работающего якоря.

Почему якорь не работает?

Честно говоря... никаких теорий на эту тему я не нашел, возможно они где-то есть.

Есть ли какое-то объяснение не работающего якоря.

Я могу лишь выдвинуть свою теория данного примера не работающего якоря:

Скорее всего... из-за приоритета "id" над "name" - в случае, если ваш якорь попадает в зону "невидимости"(display:none), то якорь автоматически отключается... даже если вы ниже/выше по коду продублируете якорь с помощью "name"




Еще пример не работающих якорей.

Из-за чего могут не работать якоря на странице?

Я вам описал выше одну из проблем с которой сам столкнулся!

Далее приведу пример, еще один, неработающих якорей из-за javascript!

Поскольку у нас есть примеры якорей... работающих и не работающих. То надо было написать скрипт, чтобы мы могли включать и выключать работающие якоря...

Внизу вы видите две кнопки... кнопка выключает якоря... нажмите по ней и проверьте ниже идущие ссылки, которые ведут наверх.

Это текст : Выключить якоря на странице!

Вторая кнопка включает якоря.

Это текст : Включить якоря!
Кнопки: Выключить якоря на странице! Включить якоря!

Ниже расположены примеры работающих и не работающих якорей:

вернуться - здесь id
вернуться - здесь name




Разбор примера не работающего якоря.

Выше вы видели пример включения/выключения якоря с помощью кнопки!

Как отключается и выключается работающий якорь?

Для повторения приведенного примера вам понадобится:

Кнопка по которой будем нажимать button.

В неё помещаем id, чтобы обратиться к тегу.

Вторая кнопка аналогичная... будет включать якоря... только id другой.

Javascript

Здесь все просто...

При нажатии(onclick) на кнопку выключить создается переменная.

Если эта переменная существует, то "якоря не работают" - отключаются действия по умолчанию...

preventDefault();

При нажатии на кнопку "включить якоря" - переменная убивается.

Весь код включения/отключения якорей на странице:

Html:

<button id="turn_off_anchors">Выключить якоря на странице!</button>

<button id="turn_on_anchors">Включить якоря!</button>

Javascript

<script>

var off_anchors;

turn_on_anchors.onclick = function(e)

{

off_anchors="";

}

turn_off_anchors.onclick = function(e)

{

off_anchors=1;

}

document.body.onclick = function(e)

{

if(off_anchors) e.preventDefault();

}

</script>




Как найти причину не работающего якоря.

Поиск ошибок неработающего якоря аналогична поиску синтаксической

ошибки.

Потому, что вообще непонятно... почему не работает якорь!

Создайте простую страницу на html.

Скопируйте пример/ы ссылки и якоря и поставьте на страницу..., чтобы удлинить страницу используйте <br>.

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

Если якоря работают на простой странице... переходим к вашей странице сайта...

Скопируйте основной текст страниц и поместите его на отдельную html страницу , если в теле текст есть подключаемые скрипты удалите их

Загрузите на сервер...

Проверьте работают ли якоря.

Если якоря не работают, то мы можем предположить, что проблема в самом тексте...

Делите текст пополам, одну половинку оставляем на странице... загружаем на сервер проверяем...

если якоря не заработали, то....

Опять делим уже половину на еще пополам и так далее... и доходим до 1 ссылки и 1 якоря и проверяем...

Я ищу не работающие якоря именно так... идем от сложного кода к простому, от длинного текста к короткому!

Если задастся целью - всегда можно найти ошибку неработающего якоря.