У меня есть якорная ссылка, которая ведет на другую страницу. При нажатии по умолчанию он переходит к началу следующей страницы. Я хочу, чтобы это было доведено до определенной позиции страницы. Как мне это сделать (либо с эффектом слайда jQuery, либо с обычным html)?
Например, при нажатии на .sample a я хочу, чтобы он привел вас к определенной позиции на странице ссылок.
Итак, этот ответ очень специфичен для вашей проблемы.
Причина, по которой ни одно из других решений не сработало, заключается в том, что ваши элементы 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 отключен, поэтому оно все еще работает.
100 мс на 300 мс.
- person Doug Neiner; 06.12.2009
Используйте такой якорь в целевом документе:
<a name="anchor1"></a>
or
<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>
вот мое решение.
$('.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>
Поэтому при нажатии на якорь он будет прокручиваться до соответствующего якоря в документе.
Первое, что вам нужно сделать, это определить якорь где-нибудь на целевой странице:
<a name="myAnchor" />
Допустим, целевая страница называется «website.html». Затем вам нужно будет добавить якорь к ссылке:
<a href="website.html#myAnchor">Click here</a>
С наилучшими пожеланиями,
Фабиан
Вы можете сделать это с помощью простого 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>
Я искал лучший способ сделать это, но я не могу его найти. Мое решение состояло в том, чтобы создать якорь нулевой ширины в целевой точке, вытащить его из нормального потока с помощью «position: relative» и убедиться, что поле содержимого было настолько высоким, насколько это необходимо, чтобы заставить следующий элемент двигаться дальше вниз на страница:
<a name="target" style="position: relative; padding-top: 200px">​</a>
Вытащив его из нормального потока, отступ не станет частью страницы, но при расчете смещения все браузеры, которые я тестировал, учитывают его при позиционировании. Конечно, это работает только для фиксированных смещений от верхней части области просмотра. Это работает, но кажется неуклюжим.
