Якорная посадка в неправильном положении

Question

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

http://harrisonfjord.com/thinkinc/

Сайт, который я сейчас строю.Я хочу сделать ссылку привязки на http://harrisonfjord.com/thinkinc/index.php#sponsors.. Я установил привязку, чтобы она появлялась непосредственно в следующем коде:

<a name="sponsors"></a>
    <div class="sponsors">
        <div class="sponsors-left">
            <h2>Sponsors</h2>
                <p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
            </div>

Однако, когда вы нажимаете на ссылку привязки, она приземляетсяпримерно на полпути вниз по div.Я подумал, что это может быть проблема с загрузкой изображений после загрузки якорной ссылки, поэтому я вручную добавил ширину / высоту для всех тегов.Я также сделал то же самое для замены текста cufon в строке заголовка.

Ничего из этого не помогло, так что теперь я обращаюсь к вам.Якорь также не работает в Firefox по любой причине.Есть мысли о том, что я здесь не так сделал?

Ура!

Answer 1

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

Кроме того, похоже, что name= было признано устаревшим в пользу из id= в качестве идентификатора фрагмента в некоторых элементах (включая A), что имеет некоторый смысл, поскольку атрибуты ID уникальны тогда как атрибуты NAME не гарантированы.

Я бы попробовал вставить идентификатор фрагмента в фактическую визуализируемую сущность, такую ​​как:

<h2 id="sponsors">Sponsors</h2>

и посмотри, куда тебя это приведет. Между прочим, это похоже на хорошую конференцию, я надеюсь, что вы получите допуск.

Answer 2

Я получил точно такую ​​же проблему в Firefox и решил ее следующим образом (так же, как sasi-ответ, но более общий - он обнаруживает, есть ли якорь в URL, и прокручиваем к нему):

$(document).ready(function() {
    if(window.location.hash.length > 0) {
        window.scrollTo(0, $(window.location.hash).offset().top);
    }
});

Кажется, это хорошо известная проблема, см. https://bugzilla.mozilla.org/show_bug.cgi?id=60307

Answer 3

У меня проблема в iphone для ссылок с фрагментами, имеющих <a href="#info">TYPES OF INFORMATION WE COLLECT</a>, правильно ссылается на <h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>.

Это не сработало должным образом, и я исправил это решение (используя jQuery):

window.scrollTo(0,$('#info').offset().top);

Answer 4

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

http://validator.w3.org/check?uri=http%3A%2F%2Fharrisonfjord.com%2Fthinkinc%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Некоторые из них настолько серьезны, например:

• Невозможно определить режим анализа!
• Не найден DOCTYPE и неизвестный корневой элемент.Прерывание валидации.

, от которого валидатор отказывается.В отличие от такой страницы, как gnu.org

http://validator.w3.org/check?uri=www.gnu.org&charset=%28detect+automatically%29&doctype=Inline&group=0

Вам должно быть приятно, что сайт отображается вообще.