90 votes

Défiler / Sauter à l'id sans jQuery

J'ai cherché dans de nombreux sujets une solution utilisable.
Mais je n'ai pas trouvé quelque chose. La plupart des scripts sont juste trop encombrés pour mes besoins.
Recherche d'une solution basée uniquement sur Javascript. Dans mon projet, il n'est pas possible d'utiliser jQuery.
J'ai besoin d'un saut ou d'un défilement vers l'identification.

<head>
<script type="text/javascript">
//here has to go function
</script>
</head>

Mon appel est :

<a onclick="function_call+targetname"><img src="image1" alt="name1"></a>
<a onclick="function_call+targetname"><img src="image2" alt="name2"></a>
<a onclick="function_call+targetname"><img src="image3" alt="name3"></a>

Je dois donc utiliser l'événement onclick dans ma navigation.

Maintenant, en cliquant, je veux sauter ou faire défiler une div id dans ma page :

<div id="target1">some content</div>
<div id="target2">some content</div>
<div id="target3">some content</div>

C'est très important : l'ancre html ne fonctionne pas malheureusement. Sinon, tout serait assez facile.

Je l'ai utilisé jusqu'à présent :

onclick="window.location.hash='target';"

Mais j'ai des restrictions sur eBay. Ils ne permettent pas ce simple code.

Je ne peux pas non plus appeler un javascript externe (je n'utilise le JS que dans la zone d'en-tête). En outre, il n'est pas possible d'utiliser : "cookie.", "cookie", "replace (", IFRAME, META ou includes) et base href.

Il ne peut pas être difficile avec un peu de JS de sauter à un point spécifique. Je n'ai pas besoin d'effets spéciaux.

Quelqu'un a-t-il une solution mince et utile ?

J'ai trouvé une solution par moi-même et grâce à Oxi. Je suis votre méthode.

Pour tous ceux qui sont intéressés par ma solution :

<head> <script type="text/javascript"> function scroll(element){   
var ele = document.getElementById(element);   
window.scrollTo(ele.offsetLeft,ele.offsetTop); } </script> </head>

Appel de navigation :

<a onclick='scroll("target1");'><img src="image1" alt="name1"></a>

Maintenant vous pouvez sauter à un div avec l'ID appelé

<div id="target1">CONTENT</div>

3voto

anonQ Points 31

La réponse d'Oxi est tout simplement fausse. ¹

Ce que vous voulez, c'est :

var container = document.body,
element = document.getElementById('ElementID');
container.scrollTop = element.offsetTop;

Exemple de travail :

(function (){
  var i = 20, l = 20, html = '';
  while (i--){
    html += '<div id="DIV' +(l-i)+ '">DIV ' +(l-i)+ '</div>';
    html += '<a onclick="document.body.scrollTop=document.getElementById(\'DIV' +i+ '\').offsetTop">';
    html += '[ Scroll to #DIV' +i+ ' ]</a>';
    html += '<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />';
  }
  document.write( html );
})();

¹ Je n'ai pas assez de réputation pour commenter sa réponse.

0voto

Joise MP Points 1

Voici ce qui a fonctionné pour moi

  • Donnez un nom à chaque section

  • Dans le fichier Javascript, créez une fonction

  • Appelez cette fonction en utilisant onclick dans les liens de navigation.

    let About = () =>document.getElementById('About').scrollIntoView();

    .about-link { min-height: 500px; }

    <div class="about-link"> <a class="nav-link" aria-current="page" onclick="About()">About</a> </div> <section id="About"> Here is about section </section>

0voto

Je suis super surpris que personne ne vous ait montré un moyen de le faire sans même utiliser de code JavaScript.

Ajoutez un ID à votre élément, puis dans votre balise de lien, ajoutez le href avec le nom de l'ID.

Exemple

<a href="#AboutMe">About Me</a>

<div id="AboutMe">
// Some code
</div>

Remarque : il s'agit uniquement de sauter, pas de faire défiler !

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X