window.scrollTo ne défile pas vers l'id fourni

Question

Je travaille sur un fichier de document unique. Je veux faire défiler les pages jusqu'à la section souhaitée avec id="projectpage" lorsque l'on clique sur une ancre avec id="about".

<a class="nav-link page-scroll"  href="" id="about">About Me</a>

<section id="aboutpage">

J'ai essayé d'utiliser

$('a#about').click(function(){
    $(window).scrollTo(0, document.getElementById('projectpage').offsetTop);

  });

ou même

$('#about').click(function(){
    $(window).scrollTo(0, document.getElementById('projectpage').offsetTop);

  });

mais rien ne fonctionne.

Lorsque je clique sur l'ancre avec id="about", je suis redirigé vers le fichier index.html (le document HTML principal) plutôt que vers l'offsetTop de id="projectpage".

Answer 1

Vous devez empêcher le comportement par défaut d'une ancre.... Utilisation de .preventDefault()

Et remplacer $(window) pour juste window ... Vous n'avez pas besoin de jQuery pour rechercher la fenêtre lorsque vous souhaitez appliquer une méthode JS vanille sur celle-ci.

$('#about').click(function(e) {
  e.preventDefault()
  window.scrollTo(0, document.getElementById('aboutpage').offsetTop);
});

section{
  height: 200px;
  border-top: 2px solid grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link page-scroll" href="" id="about">About Me</a>

<section id="somethingElse1">...</section>
<section id="somethingElse2">...</section>
<section id="somethingElse3">...</section>
<section id="aboutpage">About</section>
<section id="somethingElse4">...</section>
<section id="somethingElse5">...</section>

Answer 2

J'ai fait un petit exemple pour vous en utilisant scrollIntoView() . Il faut également tenir compte de la nécessité de event.preventDefault() pour désactiver la possibilité par défaut de cliquer sur la balise a .

En outre, scrollIntoView() a un paramètre avec un effet de transition d'animation :

behavior: "smooth"

Remarque : puisque vous utilisez jquery je ne vois pas l'intérêt de faire un casting vers un élément comme :

document.getElementById('aboutpage')

Appel, comme dans jquery :

$("#aboutpage")[0]

$('a#about').click(function(event){
  event.preventDefault();
    $("#aboutpage")[0].scrollIntoView({
    behavior: "smooth"
  }); 
});

#first {
  width: 100%;
  height: 1000px;
  background-color: green;
}

#aboutpage {
  width: 100%;
  height: 1000px;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link page-scroll"  href="" id="about">About Me</a>

<section id="first"></section>
<section id="aboutpage"></section>