Как реализовать плавную прокрутку раздела на другой странице при нажатии на ссылку привязки? - PullRequest
Новая
       33

Как реализовать плавную прокрутку раздела на другой странице при нажатии на ссылку привязки?

0 голосов
/ 22 апреля 2019

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

Мой HTML / CSS: 

<style>
#main_menu {
 position: fixed;
}
</style>
<body>

<nav id="main_menu">
          <ul>
            <li><a href="#link1">Link 1</a></li>
            <li><a href="#link2">Link 2</a></li>
            <li><a href="different-page.html#link3">Link 3</a></li>
          </ul>
        </nav>

основной раздел index.html: 

<main>
<h1 id="link1">Heading 1</h1>
<!-- some content -->
<h1 id="link2">Heading 2</h1>
<!-- some content -->
</main>

основной раздел different-page.html: 

<main>
<!-- some content -->
<!-- some content -->
<!-- some content -->
<!-- some content -->
<h1 id="link3">Heading 3</h1>
<!-- some content -->
</main>

EDIT: Сейчас я использую это для плавной прокрутки между разделами: 

$('a[href*="#"]:not([href="#"])').click(function() {

  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);

    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top - 220
      }, 1000);
      return false;
    }
  }
});

Работает для плавной прокрутки между разделами на одной странице. Но если я ссылаюсь на раздел на другой странице, он работает неправильно.
Пример:
<li><a href="#link1">Link 1</a></li> до <h1 id="link1">Heading 1</h1> работает. При нажатии страница прокручивается вниз до заголовка 1, а затем заголовок 1 отображается на 200 пикселей ниже верхней части окна просмотра и не покрывается моим липким заголовком.
<li><a href="different-page.html#link3">Link 3</a></li> ссылки из index.html на раздел <h1 id="link3">Heading 3</h1> в different-page.html Это также работает, за исключением того, что смещение -200 игнорируется. Это означает, что верхняя часть секции выравнивается по верхней части области просмотра, поэтому она закрывается при помощи липкой навигации.
Я предполагаю, что переход на новую страницу как-то портит мой js? Мне бы хотелось, чтобы он всегда обращал внимание на смещение, чтобы, когда я ссылаюсь на определенный раздел на другой странице, этот раздел загружался на 200 пикселей от верхней части области просмотра (так, под моим заголовком, а не под ним).
Надеюсь, я все правильно объяснил.

1 Ответ

1 голос
/ 22 апреля 2019

Я изменяю код Некоторые изменения CSS- 

  <style>
   html {
     scroll-behavior: smooth;
 }
    #main_menu {
    position: fixed;
 }
  </style>
 <body>

   <nav id="main_menu">
      <ul>
        <li><a href="#link1">Link 1</a></li>
        <li><a href="#link2">Link 2</a></li>
        <li><a href="#link3">Link 3</a></li>
      </ul>
    </nav>

   <main style="overflow-y:scroll;height:58vh">
   <h1 id="link1">Heading 1</h1>
   <!-- some content -->
  <h1 id="link2">Heading 2</h1>
   <!-- some content -->
  <h1 id="link3">Heading 3</h1>
 <!-- some content -->
   </main>
   <script>
 // ???
 </script>
</body>
...