Я думаю, что это может быть невозможно, постараюсь объяснить как можно лучше. У меня есть страница, содержащая вкладки (с поддержкой jquery), которые контролируются следующим:
Я использую этот код, предоставленный другим пользователем из предыдущего вопроса.
<script type="text/javascript">
$(function() {
$('html, body').animate({scrollTop:0}); // this is my "fix"
var tabContent = $(".tab_content");
var tabs = $("#menu li");
var hash = window.location.hash;
tabContent.not(hash).hide();
if(hash=="") {
$('#tab1').fadeIn();
}
tabs.find('[href=' + hash + ']').parent().addClass('active');
tabs.click(function() {
$(this).addClass('active').siblings().removeClass('active');
tabContent.hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
этот код отлично работает, когда я напрямую перехожу на страницу "вкладок".
однако мне нужно связать отдельные вкладки с других страниц - для этого в коде window.location.hash
отображается соответствующая вкладка.
страница не "перескакивает" на якорь из-за "return false".
Однако это событие запускается только при событии щелчка. следовательно, если я захожу на свои «вкладки» с любой другой страницы, срабатывает эффект «прыжка». Чтобы бороться с этим, я автоматически прокручиваю страницу до начала, но я бы предпочел, чтобы этого не происходило.
есть ли способ имитировать "return false" при загрузке страницы, предотвращая "прыжок" привязки.
надеюсь, это достаточно ясно.
Спасибо
setTimeout
и это не всегда работало. Возможно, он вам и не понадобится, если он есть в jQuery$(function() {
. На самом деле вам не нуженlocation.hash
, но приятно оставить его, чтобы браузерам не пришлось ничего делать. Также напоминает вам, для чего предназначен scrollTo!if
должен быть снаружи, а не внутри. Кроме того, минимум для интервала составляет около 10, поэтому 0 или 1 то же самое, что и 10., в зависимости от браузера.См. Мой ответ здесь: Ответ на Stackoverflow
Хитрость заключается в том, чтобы как можно скорее удалить хэштег и сохранить его значение для собственного использования:
Важно, чтобы вы не помещали эту часть кода в функции $ () или $ (window) .load (), так как было бы слишком поздно и браузер уже перешел к тегу.
источник
Есть и другие способы отслеживать, на какой вкладке вы находитесь; возможно установка файла cookie или значения в скрытом поле и т. д. и т. д.
Я бы сказал, что если вы не хотите, чтобы страница прыгала при загрузке, вам лучше использовать один из этих других вариантов, а не хеш, потому что основная причина использования хеша вместо них - разрешить именно то, что вы Заблокировать.
Еще один момент - страница не будет перескакивать, если ваши хеш-ссылки не совпадают с именами тегов в документе, поэтому, возможно, если вы хотите продолжать использовать хеш-код, вы можете манипулировать содержимым, чтобы теги назывались по-другому. Если вы используете согласованный префикс, вы все равно сможете использовать Javascript для перехода между ними.
Надеюсь, это поможет.
источник
Я использовал решение dave1010, но оно было немного нервным, когда я поместил его в функцию $ (). Ready. Итак, я сделал это: (не внутри $ (). Готово)
источник
Браузер переходит на,
<element id="abc" />
если в адресе есть хэш http://site.com/#abc и отображается элемент с id = "abc". Таким образом, вы должны просто скрыть элемент по умолчанию:<element id="anchor" style="display: none" />
. Если на странице нет видимого элемента с id = hash, браузер не будет прыгать.Создайте сценарий, который проверяет хэш в URL-адресе, а затем находит и отображает элемент prrpopriate (который по умолчанию скрыт).
Отключите поведение «хеш-подобной ссылки» по умолчанию, привязав событие onclick к ссылке и указав
return false;
как результат события onclick.Когда я реализовал вкладки, я написал что-то вроде этого:
источник
Ни один из ответов не работает для меня достаточно хорошо, я вижу, как страница перескакивает на якорь, а затем вверх для некоторых решений, некоторые ответы вообще не работают, возможно, что-то изменилось за годы. Надеюсь, моя функция кому-то поможет.
источник
$(document).ready(function () { preventAnchorScroll(); });
просто вызовите функцию в самом начале вашего JavaScript. Протестировал сейчас, у меня работает в Chrome, Firefox и Opera.Исправлен только грязный CSS, чтобы прокрутка оставалась прокручиваемой каждый раз при использовании якоря (бесполезно, если вы все еще хотите использовать якоря для прокрутки-переходов, очень полезно для диплинков):
источник
Хотя принятый ответ работает хорошо, я обнаружил, что иногда, особенно на страницах, содержащих большие изображения, полоса прокрутки будет дико прыгать, используя
Что может сильно отвлекать пользователя.
Решение, на котором я остановился в конце, на самом деле довольно простое, и заключается в использовании другого идентификатора цели, отличного от того, который используется в
location.hash
Например:
Вот ссылка на другой странице
Так что, конечно, если
tab2
на странице вкладок есть элемент с идентификатором, окно перейдет к нему при загрузке.Таким образом, вы можете добавить что-нибудь к идентификатору, чтобы предотвратить это:
И тогда вы можете добавить
"-noScroll"
кlocation.hash
в JavaScript:источник
В моем случае из-за использования ссылки привязки для всплывающего окна CSS я использовал такой способ:
Просто сохраните pageYOffset первым делом при нажатии, а затем установите для этого ScrollTop:
источник
Я думаю, что нашел способ использовать вкладки пользовательского интерфейса, не переделывая функциональность. Пока проблем не обнаружил.
Все в рамках готового мероприятия. Он добавляет «tab_» к хешу, но работает как при нажатии, так и при загрузке страницы с хешем.
источник
Это будет работать с bootstrap v3
источник
Другой подход
Попробуйте проверить, прокручена ли страница, и только потом сбросьте позицию:
Heres a demo
источник
Я не добился большого успеха в использовании вышеуказанных
setTimeout
методов в Firefox.Вместо setTimeout я использовал функцию onload:
К сожалению, это все еще очень глючно.
источник
У меня не было стабильного успеха с этими решениями.
Видимо из-за того, что переход происходит до ссылки Javascript => ( http://forum.jquery.com/topic/preventing-anchor-jump )
Мое решение - расположить все якоря вверху по умолчанию с помощью CSS.
Затем используйте jquery для прокрутки до родителя целевого якоря или брата (может быть, пустой тег em)
Пример jquery для прокрутки, когда URL-адрес вводится с хешем
(страница не должна быть уже загружена в окне / вкладке, это охватывает ссылки из других / внешних источников)
Также вы захотите запретить по умолчанию щелчки привязки на странице, а затем прокрутить до их целей.
и jquery
Преимущество этого метода в том, что целевые теги привязки остаются структурно рядом с релевантным контентом, хотя их положение CSS находится наверху.
Это должно означать, что у поисковых роботов не будет проблем.
Ура, надеюсь, это поможет
Грею
источник
Попробуйте это, чтобы предотвратить вертикальную прокрутку клиента при изменении хэша (внутри вашего обработчика событий):
(перерисовка браузера)
источник
Решил мой промлем, сделав это:
источник