Dans mon application, j'ai un volet de navigation sur la gauche avec du contenu dans un volet sur la droite. Lorsque vous cliquez sur un élément dans le volet de navigation, il charge dynamiquement le contenu dans le volet de contenu grâce à l'utilisation de jQuery ajax. Lorsque le contenu est chargé, je mets à jour l'url du navigateur. Par exemple:

www.mysite.com/content.html#section1
www.mysite.com/content.html#section2
www.mysite.com/content.html#section3

Dans le contenu, j'aimerais avoir des liens vers d'autres zones du même contenu, de sorte que lorsque vous cliquez dessus, le contenu y défile. Si j'utilise les balises d'ancrage typiques, l'URL du navigateur sera mise à jour, ce que je veux éviter. Je peux utiliser un gestionnaire de clics et du Javascript pour y accéder. Mais je me demande s'il existe un moyen d'y parvenir sans Javascript.

-1
AndroidDev 19 mars 2019 à 11:44

2 réponses

Meilleure réponse

Pouvez-vous accomplir cela sans Javascript ? La réponse est non, vous ne pouvez pas.

Vous devez utiliser un événement de clic personnalisé.

1
Tristan De oliveira 19 mars 2019 à 08:49
<!DOCTYPE html>
<html>
<head>
<style>
html {
  scroll-behavior: smooth;
}

#section1 {
  height: 600px;
  background-color: pink;
}

#section2 {
  height: 600px;
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Smooth Scroll</h1>

<div class="main" id="section1">
  <h2>Section 1</h2>
  <p>Click on the link to see the "smooth" scrolling effect.</p>
  <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
  <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>

<div class="main" id="section2">
  <h2>Section 2</h2>
  <a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>

</body>
</html>

Lien PFB qui peut être utile : https://www.w3schools.com/howto/tryit.asp?filename= tryhow_css_smooth_scroll

0
PKInd007 19 mars 2019 à 08:50