Scroll non désiré

Bonjour chers amis je développe une application web et je buttes sur un problème.

J’ai une base de données dans laquelle j’ai plusieurs posts avec les commentaires relatives a ces posts. Sur ma page de forum j’affiche 10 posts par page et 5 commentaires par post et un input pour permettre a l’utilisateur de commenter le post.

Ce que j’aimerai faire c’est lorsque l’utilisateur commente un post par exemple le post qui est a la 5 eme position sur ma page qu’il n’y ai pas de retour en haut c’est a dire vers le premier post.

J’utilise la méthode ajax pour enregistrer et afficher les commentaires mais lorsque ça finis ça me ramene toujours vers le haut pourriez vous m’aidez?

code ajax pour l’enregistrement:

function fonction_commentaire(id_post){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            resultat = xhr.responseText;
            id = "commentaires_post_" + id_post;
            document.getElementById(id).innerHTML = resultat;
        }
    };
    commentaire = document.getElementsByName("commentaire"+id_post)[0].value;
    xhr.open('GET', 'final_commentaire.php?id_post=' + id_post + '&commentaire='+commentaire, true);
    xhr.send();
}

Normalement pour ajouter un élément, tu dois utiliser appendChild plutôt que d’injecter/modifier le HTML de ta page. Cette pratique évite notamment de recharger tous les éléments et de casser certain listener (event onclick par exemple).

Dans l’ordre :

• Créer une div (const div = document.createElement("div")).
• Injecter le HTML à cette div div.innerHTML = "commentaire".
• Insérer la div à ta page (parent.appendChild(div)).

Ensuite met un anchor dans ton commentaire pour scroller jusqu’à lui si nécessaire.

Ok je vais voir et faire un retour

Je comprends pas l’utilisation du anchor puisque lorsque l’utilisateur post je l’emmener a ça même position sans qu’il ne sents ça

J’ai trouver ma solution et je veux quelques explications

J’utilise le bouton basique de html et il n’y a plus de rafraichissement pourquoi?

<input type="button" onclick="fonction_commentaire();" value="valider">

A la place de

<button onclick="fonction_commentaire();">valider</button>

Et ça marche

Ou bien cette deuxieme technique qui est la suivante:

<button onclick="fonction_commentaire(); return false;">valider</button>

Qui marche aussi très bien merci a vous.