2012-01-20 3 views
1

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

Я работаю на строительство веб-сайт, который использует переходы CSS3 и кучу хэш-ссылок, в отличие от использования jQuery для загрузки/перехода на разные страницы/элементы (просто для удовольствия/для подтверждения того, что I/CSS может). Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю на одну из моих ссылок, полоса прокрутки автоматически спускается примерно на 100 пикселей без видимых причин.

Я не помню, чтобы это делалось все это время, поэтому, возможно, что-то в моем CSS стало странным. Я также добавил теги <a name> вверху, чтобы попытаться вернуть его обратно, но это тоже не работает. Я также пытался ставить onclick="window.scrollTo(0,0);" в ссылках, а также и что не работает либо :(

Любые идеи/помощь будет удивительным, так как это действительно раздражает/беден удобство, чтобы прокручивать каждый раз, когда вы переходите к . стр Вы можете просмотреть страницу here

System Info:.

браузер (ы): Chrome 16.0.912.75, FireFox 9.0.1, Opera 11,6

ОС: Windows 7

+0

Я заметил, что это не происходит на # websites' странице ', так что, возможно, я немного посмотрю на это и посмотрю, что в этом по-другому ... –

ответ

2

Я не знаком с переходами CSS3, поэтому я не совсем понимаю, что вы делаете. Однако:

  1. Я предполагаю, что это поведение, которое вы найдете нежелательно что-то делать с машинным поведением браузера прокрутки элемента в поле зрения на основе идентификатора фрагмента в URL. Я не уверен, что если переопределить это с помощью элементов <a name>, это сработает, но в любом случае вы неправильно установили значения name, поставив перед ними хэш. Например, должен быть <a name="about"></a> не <a name="#about"></a>.

  2. По крайней мере, для целей отладки, я бы попробовал добавить прослушиватель событий click и позвонить preventDefault(), чтобы узнать, не остановит ли он прокрутку.

  3. Было бы полезно, чтобы заявить, что такое браузер (в том числе операционной системы и версии) вы столкнулись проблемы в.

+0

Добавлена ​​информация обозревателя/ОС.Спасибо за подсказку в 'name', но, к сожалению, ни то, ни другое' preventDefault' не работали ('preventDefault()' останавливает ссылку от навигации вообще, что плохо - я все еще хочу, чтобы материал загружался, я просто надел «Не хочу, чтобы глупая страница спрыгивала, как есть). –

+0

Да, но это только ссылки на разделы того же документа, и вы используете другой интерфейс, чем прокрутку для их отображения. Поэтому, если 'preventDefault()' нарушит то, что вы делаете с CSS, я не понимаю, в чем проблема. Re: Ваш другой комментарий, да, я думал, что это, вероятно, имеет какое-то отношение к вашей навигации с фиксированной позицией. Возможно, позиционирование разделов контента, на которые вы ссылаетесь, так, чтобы верх был ниже навигатора, зафиксировал бы его или разместил бы их сверху на верхней части документа и предоставил им «padding-top». – JMM

+0

Это 100% ломает CSS - то, как работает этот трюк, переходы CSS приводят фрагменты документа в/из вида, перемещая их, изменяя непрозрачность и т. Д. Технически вся страница есть все время, но разные разделы либо невидимым, либо сверху/слева от экрана. Похоже, что это работает над дополнением: D –

0

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

+0

А, я вижу, что происходит. Это моя жесткая жесткая панель меню div наверху, которая заставляет ее казаться, что она прыгает в глупое место. Использование некоторого JavaScript в порядке (отклонение баннера в правом нижнем углу выполняется с помощью................................................................................................................. m, угадав, что решение будет выглядеть примерно так: '' window.setScroll (0, [heightOfMenuBar]) '"? –

+0

Nevermind - см. выше комментарии с помощью @JMM. Добавление padding-top в divs works: D –