привязка ссылки на определенную позицию страницы - PullRequest
Новая
       27

привязка ссылки на определенную позицию страницы

3 голосов
/ 06 декабря 2009

У меня есть якорная ссылка, которая ссылается на другую страницу. При щелчке по умолчанию он переходит в начало следующей страницы. Я хочу, чтобы это привело к определенной позиции страницы. Как мне это сделать (с помощью слайд-эффекта jQuery или обычного HTML)?

Например, когда нажимается .sample a, я хочу, чтобы он перенес вас на определенную позицию на странице ссылок.

Ответы [ 7 ]

13 голосов
/ 06 декабря 2009

Используйте такой якорь в вашем целевом документе: 

<a name="anchor1"></a>

или 

<a id="anchor1"></a>

и в вашем исходном документе: 

<a href="http://www.example.com/some/page.html#anchor1">Go to anchor 1</a>

или в том же документе: 

<a href="#anchor1">Go to anchor 1</a>
3 голосов
/ 06 декабря 2009

ОК, поэтому этот ответ очень специфичен для вашей проблемы.

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

Чтобы доказать это, нажмите на ссылку на главной странице и увидите, что не работает. Затем измените хэш с #whatever на #bgaboutbody, и вы увидите, что он работает правильно.

Итак, использование чего-то подобного заставит вас работать. По сути, если есть хеш, он будет оживлен до нужного места. Поместите это в блок скрипта в самом низу вашей страницы (прямо над тегом </body>) 

window.setTimeout(function(){
    if(window.location.hash){
        var $target  = $(window.location.hash).closest("#bgaboutbody");
        if($target.length)
            $('html, body').animate({scrollTop: $target.offset().top}, 1000);
    }
}, 100);

Научитесь использовать запасные варианты:

Всегда лучше убедиться, что ваш контент будет загружаться без JavaScript на таком сайте продаж, как этот. (В веб-приложении я чувствую, что это другое обсуждение). Я бы порекомендовал использовать решение, которое я дал вам этот вопрос , где вы добавляете класс js к элементу html в <head> страницы. Затем настройте свой CSS следующим образом: 

.js #contact, .js #about, etc { display:none }

Так что он будет скрыт, только если присутствует JS. Кроме того, поскольку это решение также использует JavaScript, важно, чтобы они были видны, если JS отключен, поэтому он все еще работает.

2 голосов
/ 03 сентября 2012

вот мое решение. 

        $('.container').on('click', function(e){
            var hash        = $(this).find('a').attr('href'),
                target      = $('html').find('p'+hash),
                location    = target.offset().top;

            $('html, body').stop().animate({scrollTop: location}, 1000);

            e.preventDefault();
        });

HTML будет выглядеть так: 

<div class="container">
   <a href="hash">click me</a>
</div>

<p id="hash"></p>

Таким образом, при нажатии на якорь он прокручивается до соответствующего якоря в документе.

1 голос
/ 06 декабря 2009

Первое, что вам нужно сделать, это определить привязку где-нибудь на целевой странице: 

 <a name="myAnchor" />

Допустим, целевая страница называется "website.html". Затем вам нужно будет добавить привязку к ссылке: 

 <a href="website.html#myAnchor">Click here</a>

С наилучшими пожеланиями,
Fabian

0 голосов
/ 17 января 2013

Я искал лучший способ сделать это, но я не могу найти один. Мое решение состояло в том, чтобы создать якорь нулевой ширины в целевой точке, вытащить его из нормального потока с помощью «position :lative» и убедиться, что поле содержимого было настолько высоким, насколько это необходимо, чтобы заставить следующий элемент дальше страница: 

<a name="target" style="position: relative; padding-top: 200px">&#x200B;</a>

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

0 голосов
/ 06 декабря 2009

Использовать атрибут name .

0 голосов
/ 06 декабря 2009

Вы можете сделать это с помощью простого html, используя хеш-адрес "#". Например: 

<a id="somelocation"></a>

Может автоматически прокручиваться в представлении, щелкая ссылку как: 

<a href="#somelocation">Go to somelocation on this page</a>

Это можно сделать и ссылками на другие страницы. 

<a href="someotherpage.html#somelocation">Go to somelocation on someotherpage</a>
...