Как подавить переход к #якорю, указанному в URL?

Question

[Николай Чуприк]

На странице есть якоря <a name=...>. Они используются как при навигации внутри страницы, так и для внешний переходах сразу к нужному месту.

Проблема: При переходе на URL с указанным якорем, страница сразу (onready) отматывается до якоря. Однако вёрстка самой страницы производится скриптом: вычисляются и растаскиваются высоты, ширины, положения элементов. Поэтому когда всё устаканивается, якорь оказывается совсем не там, куда нас вначале перебросил браузер.

Сам я вижу такие варианты решения:

1. Как-то подавить переход на якорь изначально. А потом, когда страница полностью сформировалась, самому (скриптом, разумеется) проскроллить до нужного места, прочитав #имя из URL. Со второй часть проблем нет, но как подавить переход?

2. Заменить якоря на свои нестандартные. Например вместо <a name=...> изначально грузить HTML с тэгом вида <a my_anchor_name=...>. Когда вёрстка устаканивается подменять их на нормальные <a name=...> и как в п. 1 скроллить к ним самому.

Но мне кажется, это должна быть стандартная ситуация, с которой многие сталкивались. Решается ли она как-то просто без моих "велосипедов"?

Comments

[Павел Корнилов]

Надо скриптом пробежаться по URLам и динамически убрать якоря, если они не нужны. Или перенести в дополнительный атрибут, если нужны.

Answer 1

[Антон]

Представить, что у Вас творится в проекте, мне не удалось, но вероятнее всего Вам стоит смотреть в сторону e.preventDefault();

Comments

[Николай Чуприк]

А на что тогда вешать preventDefault()? Неужели на onready?

И вообще какие дефолтные вещи должны происходить по onready? Не представляю.

[zorca]

Николай Чуприк, как вариант, не использовать ссылочный тег, если он ссылкой не является.

[Антон]

Николай Чуприк, Верстка производится скриптом...Как вариант, попробуйте написать или взять уже готовый скрипт, который бы ждал на сайте прогрузки всего контента, и только потом отрабатывал зашитый в теле код.

[Николай Чуприк]

Антон, похоже мы с вами друг друга не понимаем. У меня, разумеется, так и есть, код отрабатывает частично по onready, а частично по onload. Но браузер сразу же перекидывает пользователя к якорю из URL там, где этот якорь находится сразу же после загрузки структуры страницы, не дожидаясь моей вёрстки. А после вёрстки этот якорь уезжает, куда мне надо, но браузер-то уже к нему не перекинет. Поскольку всё это происходит быстро, то пользователь просто оказывается не в той части страницы, которой была протэгана в URL.

[Николай Чуприк]

zorca, Не понял вас. Что вы имеете ввиду? Не обязательно <a name=...>? Вероятно я чего-то не знаю. Уточню, что мне надо, чтобы существовали внешние ссылки на определённые параграфы страницы. Это ведь можно только так: mysite.ru/mypage.html#mytag ?

[zorca]

Николай Чуприк, да, все верно, просто не сразу понял суть вопроса. Но по логике работы любой браузер просто обязан стекаться к якорю и стили тут не при чем. Я думаю, что ссылка на код сайта решила бы все. Нет кода - нет понимания проблемы в вашем случае.

[Антон]

Николай Чуприк, Ааа...Ну тогда, у меня нет идей, кроме как делать проверку по таймауту и интервалу на какой либо маяк, который присутствует в вашей верстке, и когда верстка уже реально встанет, то выйди из проверки и только после этого совершать переход...
Понятия не имею, поможет ли это в данном случае, т.к. без реального примера пока не могу прикинуть

Answer 2

[Егор Живагин]

Не строить вёрстку скриптом))

Только костыльные решения. Например, заменить тэг a на <div data-href="id_name"> ... . Естественно, скролл делать скриптом.
Подменять урл через history api . (это самая некрасивая часть)

При загрузке страницы парсить урл и скроллить куда надо

Comments

[Николай Чуприк]

Не строить вёрстку скриптом))

Слаб человек.

Не могу сделать в CSS всё что хочу.

Например есть сладшоу (да ещё с паралаксом) в которое загружаются картинки разных размеров. А мне надо сделать высоту окна для слайдшоу по наименьшей из высот изображений, после их ресайза на фиксированную ширину с учётом сохранения пропорций. Как это сделать на CSS я не представляю.

Например, заменить тэг

Ну да, я примерно это и имел ввиду в своём "велосипеде" №2.

Answer 3

[Николай Чуприк]

Вот так сделал, получилось довольно несложно:

В HTML загружаются такие якоря

<a anchor="tag"/>

$(document).on('load', function()	{

	// Заменить якоря с условных на нормальные
	$('a[anchor]').each( function()	{
		var tag = $(this).attr('anchor');
		$(this).attr('name', tag).removeAttr('anchor');
	});

	// Проскроллить до якоря
	var tag = document.location.href.split('#')[1];
	var pos = $('a[name='+tag+']').offset().top;

})

Comments

[Bhudh]

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

[Даулет Ногайбек]

Николай, не могли бы объяснит как работает этот скрипт? Это с перехода с страницы на страницу?

[Николай Чуприк]

Даулет Ногайбек, уточните, что именно не понятно в скрипте? Написано на jQuery.

$('a[anchor]') Отыскивает все тэги <a>, у которых существует атрибут anchor.

После этого для каждого из этих тэгов выполнятся функция

var tag = $(this).attr('anchor'); В переменную tag помещаем значение атрибута anchor. Для приведённого примера tag == "tag".

$(this).attr('name', tag).removeAttr('anchor'); Теперь в тэге <a> создаём новый атрибут 'name' и присваиваем ему значение бывшего атрибута tag.

B результате этих действий вместо <a anchor="tag"> получили <a name="tag"> во всех тэгах <a>.

Это всё должно произойти после того, как структура страницы загрузилась. При этом если переход (откуда-то снаружи) был на линк тип mypage.html#tag, то он не сработал, потому что на момент загрузки не существовало в документе<a name="tag">. А теперь когда он появился, надо искусственно вызвать скролинг до него.

var tag = document.location.href.split('#')[1]; Вычленяем из URL всё, что находится после #, т.е. имя "tag"

var pos = $('a[name='+tag+']').offset().top; Перемещаемся к <a name="tag">