web-dev-qa-db-fra.com

Faites défiler/Aller à id sans jQuery

J'ai cherché beaucoup de sujets pour trouver une solution utilisable.
Mais ne trouve pas quelque chose. La plupart des scripts sont 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 faites défiler jusqu'à id .

<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, cliquez sur je veux sauter ou faire défiler jusqu'à un identifiant div 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 malheureusement pas. Sinon, tout serait assez facile. 

J'ai utilisé bevore simplement:

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

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

De plus, je ne peux pas appeler un javascript externe (utilisez uniquement JS dans la zone head). De plus, il n'est pas possible d'utiliser: "cookie.", "Cookie", "replace (", IFRAME, META ou includes) et la base href.

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

Quelqu'un at-il une solution mince et utile?

J'ai trouvé une solution par moi-même et grâce à Oxi. Je suis ton façon.

Pour tous ceux 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 passer à une div avec un ID appelé

<div id="target1">CONTENT</div>
javascripthtmlscroll
31
user1805546

Peut-être devriez-vous essayer scrollIntoView.

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

Cela fera défiler jusqu'à votre élément.

85
Aakash

si vous voulez un défilement régulier, ajoutez la configuration behavior.

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

le code ci-dessous pourrait vous aider

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

sur la balise anchor, utilisez href et non onclick

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

Et div:

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

Ajouter la fonction:

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

Déclenche la fonction:

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

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

Ce que tu veux 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

1
anonQ