Плавная прокрутка с других страниц на Javascript - PullRequest
Новая
       63

Плавная прокрутка с других страниц на Javascript

0 голосов
/ 29 апреля 2020

Я создал плавную прокрутку с javascript. Я сделал это хорошо для прокрутки в пределах страницы. Но при переходе с другой страницы он идет в каталог # position, затем запускает анимацию. Он написан в виде фрагмента if (urlHash) {} area.

Я бы хотел, чтобы на странице сначала отображалась верхняя часть тела, а затем, через 1 секунду, переход на позиции ссылки при переходе с другой страницы, например, нажав index.html#block02.

Я не могу понять это. Пожалуйста помоги. Большое спасибо. 

const anchors = document.querySelectorAll('a[href^="#"]');
const header = document.querySelector('header').offsetHeight;
const urlHash = location.hash;

for ( let i = 0; i < anchors.length; i++ ) {
  anchors[i].addEventListener('click', (e) => {
    e.preventDefault();

    const href= anchors[i].getAttribute("href");

    if (href !== '#top') {

      const target = document.getElementById(href.replace('#', ''));

      const position = window.pageYOffset + target.getBoundingClientRect().top - header;

      window.scroll({
        top: position,
        behavior: 'smooth'
      });

    } else {
      window.scroll({
        top: 0,
        behavior: 'smooth'
      });

    }
  });
}

window.addEventListener('DOMContentLoaded', (event) => {
  if (urlHash) {
    window.scrollTo({top:0});
    setTimeout(function () {

      const urlTarget = document.getElementById(urlHash.replace('#', ''));

      const urlPosition = window.pageYOffset + urlTarget.getBoundingClientRect().top - header;
      window.scroll({
        top: urlPosition,
        behavior: 'smooth'
      });
    }, 1000);
  }
});
header {position: fixed; width:100%; height: 100px; text-align:center; border-bottom:1px solid #ccc;}
div {height: 200vh;}
a {display: inline-block;}
main{padding-top: 100px;}
<header>header</header>
<main>
<a href="#block01">block01へ移動</a>
<a href="#block02">block02へ移動</a>

<div id="block01">block01</div>
<div id="block02">block02</div>

<a href="#top">topへ戻る</a>
</main>

1 Ответ

1 голос
/ 29 апреля 2020

Просто сбросьте позицию прокрутки вверху вашего скрипта: 

setTimeout(() => { window.scrollTo(0, 0) }, 0) // Here

const anchors = document.querySelectorAll('a[href^="#"]');
const header = document.querySelector('header').offsetHeight;
const urlHash = location.hash;
// ...
...