Ссылка с привязкой к другой странице (href)

Question

У меня есть страница с рабочими якорями , подобными этим:

<a class="nav-link" href="#ta-services">Leistungen</a>
...
<section class="border-top" id="ta-services">

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

<a class="nav-link" href="index.html#ta-services">Leistungen</a>

Однако ссылка работает так же, как обычная ссылка на индекс. html, страница не прокручивается вниз. Пример онлайн на http://elisabethzenz.at/impressum_datenschutz.html. Ссылка в правом верхнем углу с именем «Leistungen».

Сайт основан на шаблоне bootstrap, это может быть некоторым вмешательством в полноэкранное изображение заголовка - я был бы признателен за любые подсказки, как решить проблему!

Answer 1

У вас есть значительная сумма JS, которая задерживает загрузку страницы. Браузер ищет #ta-services при начальной загрузке и не видит его, поэтому он останавливается.

Вам нужно использовать JS для прокрутки до позиции после того, как все закончило загрузку. Вы можете сделать это с некоторыми JS, которые выглядят так:

document.getElementById('id').scrollIntoView({
  behavior: 'smooth'
});

Поместите это в JS для запуска после загрузки страницы. Если у вас этого еще нет, вы можете использовать:

document.addEventListener('DOMContentLoaded', function(event) {
  // Scroll into view code here
});

Answer 2

На основе Калеб Энтони ответ:

Вы можете перейти к #ta-services, используя JavaScript после загрузки страницы:

document.addEventListener('load', function(event) {
    document.getElementById('ta-services').scrollIntoView({behavior: 'smooth'});
});

Разница между load и DOMContentLoaded событиями объясняется здесь как

Событие load происходит, когда вся страница имеет загружен, включая все зависимые ресурсы, такие как таблицы стилей и изображения. Это в отличие от DOMContentLoaded , который запускается сразу после загрузки DOM страницы, не дожидаясь окончания ресурсов до завершения sh загрузки.

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

Answer 3

@ Markus Proske ниже скрипт поможет вам. Скрипт navbar для перехода в соответствующий раздел на другой странице

Здесь я определил скрипт навигации.

---

$('.nav-link').on('click', function (event) {
    var $anchor = $(this);
     $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
     }, 1500, 'easeInOutExpo');
     event.preventDefault();
});

---

Например, здесь я дал структуру навигации, то есть

 <!-- Homepage "index.html"--> 
  <nav id="menu">
    <ul id="menu-main-menu" class="menu menu-main">
      <li class="nav-link"> <a href="#home"><span>Home</span></a> </li> <!-- index.html -->      
      <li class="nav-link"> <a href="about-us.html"><span>About Us</span></a> </li> <!-- separate page -->
      <li class="nav-link"> <a href="#contact"><span>Contact Us</span></a> </li>            
    </ul>
  </nav>

  <!-- Homepage has below sections "index.html"-->
  <section id="home"></section>
  <section id="contact"></section>


 <!-- About-Us Page -->
  <nav id="menu">
    <ul id="menu-main-menu" class="menu menu-main">
      <li class="nav-link"> <a href="index.html#home"><span>Home</span></a> </li> <!-- index.html -->      
      <li class="nav-link"> <a href="about-us.html"><span>About Us</span></a> </li>            
      <li class="nav-link"> <a href="index.html#contact"><span>Contact Us</span></a> </li>
    </ul>
  </nav>

Answer 4

Когда я удалил все ваши JS, все заработало как положено. Я прокомментировал все ваши прелоадеры, скрипты, bootstrap, et c. Большая часть того, что люди предлагают здесь, уже была сделана там, поэтому я считаю, что вы хороши в этом плане. Ваша якорная ссылка работает, когда мы убираем JS из картинки.

Мы знаем, что проблема в том, что вы используете одну из библиотек / сценариев, так что это на шаг ближе.

Можем ли мы последовательно приступить к детализации проблемы, удалив вероятных преступников (таких как ваш ленивые грузчики?) по одному?

Answer 5

Родная навигация по фрагментам работает корректно. У вас есть JavaScript, который прокручивает страницу вверх, когда URL имеет компонент ha sh.

В assets/js/theme.js вокруг строки 702:

  var hash = window.location.hash;

  if (hash && document.getElementById(hash.slice(1))) {
    var $this = $(hash);
    $('html, body').animate({
      scrollTop: $this.offset().top - $("a[href='" + hash + "']").data('offset')
    }, 400, 'swing', function () {
      window.history.pushState ? window.history.pushState(null, null, hash) : window.location.hash = hash;
    });
  }

$("a[href='" + hash + "']").data('offset') возвращает неопределенное значение, поэтому scrollTop: NaN = scrollTop: 0

Вы можете просто удалить весь этот код, и он будет работать.

Или убедиться, что операция не возвращает NaN:

scrollTop: $this.offset().top - ($("a[href='" + hash + "']").data('offset') || 0)

Answer 6

Я заметил, что у вас есть jQuery.

Вы можете добавить этот фрагмент кода непосредственно перед закрытием тега body.

<script> 
    $('html,body').animate({scrollTop: $(window.location.hash).offset().top});
</script>

Answer 7

Работает как положено, но ...

# ссылка работает как положено. Браузер фактически прокручивает страницу до указанного идентификатора, но мгновенно прокручивает документ до самого верха. Может быть, часть вашего JS кода прокручивает вашу страницу вверх.

Если вы откроете эту страницу и будете следить за полосой прокрутки, вы сможете заметить поведение полосы прокрутки. Сначала он прокручивается до указанного идентификатора, т.е. # ta-services, и в то же время перемещает полосу прокрутки вверх.

Вам необходимо выяснить JS код, который вызывает эту проблему.

Answer 8

Добавить следующий код скрипта и обновить html код навигационной ссылки для меню «Leistungen»

$(document).on('click',"#goto-services",function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $("#ta-services").offset().top
    }, 'slow');
});

<a class="nav-link" href="#ta-services" id="goto-services">Leistungen</a>

Answer 9

Используйте встроенную функцию прокрутки якоря.

page1. html

<a href="page2.html#Anchorname">go to page 2</a>
<a name="Anchorname"></a>

page2. html

<a href="page1.html#Anchorname">goto page 1</a>
<a name="Anchorname"></a>