На странице есть якоря <a name=...>. Они используются как при навигации внутри страницы, так и для внешний переходах сразу к нужному месту.
Проблема: При переходе на URL с указанным якорем, страница сразу (onready) отматывается до якоря. Однако вёрстка самой страницы производится скриптом: вычисляются и растаскиваются высоты, ширины, положения элементов. Поэтому когда всё устаканивается, якорь оказывается совсем не там, куда нас вначале перебросил браузер.
Сам я вижу такие варианты решения:
1. Как-то подавить переход на якорь изначально. А потом, когда страница полностью сформировалась, самому (скриптом, разумеется) проскроллить до нужного места, прочитав #имя из URL. Со второй часть проблем нет, но как подавить переход?
2. Заменить якоря на свои нестандартные. Например вместо <a name=...> изначально грузить HTML с тэгом вида <a my_anchor_name=...>. Когда вёрстка устаканивается подменять их на нормальные <a name=...> и как в п. 1 скроллить к ним самому.
Но мне кажется, это должна быть стандартная ситуация, с которой многие сталкивались. Решается ли она как-то просто без моих "велосипедов"?
Николай Чуприк, Верстка производится скриптом...Как вариант, попробуйте написать или взять уже готовый скрипт, который бы ждал на сайте прогрузки всего контента, и только потом отрабатывал зашитый в теле код.
Антон, похоже мы с вами друг друга не понимаем. У меня, разумеется, так и есть, код отрабатывает частично по onready, а частично по onload. Но браузер сразу же перекидывает пользователя к якорю из URL там, где этот якорь находится сразу же после загрузки структуры страницы, не дожидаясь моей вёрстки. А после вёрстки этот якорь уезжает, куда мне надо, но браузер-то уже к нему не перекинет. Поскольку всё это происходит быстро, то пользователь просто оказывается не в той части страницы, которой была протэгана в URL.
zorca, Не понял вас. Что вы имеете ввиду? Не обязательно <a name=...>? Вероятно я чего-то не знаю. Уточню, что мне надо, чтобы существовали внешние ссылки на определённые параграфы страницы. Это ведь можно только так: mysite.ru/mypage.html#mytag ?
Николай Чуприк, да, все верно, просто не сразу понял суть вопроса. Но по логике работы любой браузер просто обязан стекаться к якорю и стили тут не при чем. Я думаю, что ссылка на код сайта решила бы все. Нет кода - нет понимания проблемы в вашем случае.
Николай Чуприк, Ааа...Ну тогда, у меня нет идей, кроме как делать проверку по таймауту и интервалу на какой либо маяк, который присутствует в вашей верстке, и когда верстка уже реально встанет, то выйди из проверки и только после этого совершать переход...
Понятия не имею, поможет ли это в данном случае, т.к. без реального примера пока не могу прикинуть
Только костыльные решения. Например, заменить тэг a на <div data-href="id_name"> ... . Естественно, скролл делать скриптом.
Подменять урл через history api . (это самая некрасивая часть)
При загрузке страницы парсить урл и скроллить куда надо
Например есть сладшоу (да ещё с паралаксом) в которое загружаются картинки разных размеров. А мне надо сделать высоту окна для слайдшоу по наименьшей из высот изображений, после их ресайза на фиксированную ширину с учётом сохранения пропорций. Как это сделать на CSS я не представляю.
Например, заменить тэг
Ну да, я примерно это и имел ввиду в своём "велосипеде" №2.
$(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;
})
Даулет Ногайбек, уточните, что именно не понятно в скрипте? Написано на 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">
Простой
