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>

173voto

Aakash Points 1735

Vous devriez peut-être essayer scrollIntoView.

document.getElementById('id').scrollIntoView();

Cela fera défiler votre élément.

92voto

agriboz Points 1691

Si vous voulez un défilement fluide, ajoutez behavior configuration.

document.getElementById('id').scrollIntoView({
  behavior: 'smooth'
});

17voto

Leon Points 113

Ajoutez la fonction :

function scrollToForm() {
  document.querySelector('#form').scrollIntoView({behavior: 'smooth'});
}

Déclencher la fonction :

<a href="javascript: scrollToForm();">Jump to form</a>

3voto

Rusty Points 1242

Sur la balise d'ancrage, utilisez href et non onclick

<a href="#target1">asdf<a>

Et div :

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

3voto

Oxi Points 431

Le code ci-dessous pourrait vous aider

var objControl=document.getElementById("divid");
objControl.scrollTop = objControl.offsetTop;

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