Bonjour,

Je rencontre un petit problème avec mon code. Je veux remonter en haut de la page, après avoir cliqué sur un lien.
Le code ci-dessous fonctionne sous codepen.io mais pas sur le site. Idem pour un autre code JS, on dirait que le site ne charge pas le JS, pourtant une simple alert ("exemple") en js fonctionne.

Ce que je fais

Un bout de code JS :

//Remonter en haut page contact
    $('body').on('click', '.skip-top-contact', function (e) {
        $('html, body').animate({
            scrollTop: $("#top-contact").offset().top
        }, 500);
    });

Un bout de code dans le html et un id "top-contact" en haut de la page :

 <div id="top-contact"></div>

Un bout de code dans le CSS :

/* Bouton remonter en haut page contact */
.skip-top-contact {
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  position: relative;
  float: right;
  margin-top: 15px;
  cursor: pointer;
} 

.skip-top-contact::before {
  content: "\e260";
  width: 16px;
  height: 14px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -80%;
  font-family: 'Glyphicons Halflings', sans-serif;
  font-size: 16px;
  color: {{settings.primaryColor}};
}

Ce que je veux

En cliquant sur le lien "remonter en haut", je veux remonter en haut de la page.

Ce que j'obtiens

Le code ne fonctionne pas, mais le code à été testé sur codepen.io et il fonctionne.

4 réponses


Salut,
Tu utilise du jquery.
Tu l'as importé dans ton code ?

DSARRAZY
Auteur

Hello, oui dans le code source de la page je trouve : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ta pas besoin de javascript pour ça
place un id sur ton element en haut de page ( nav, header, que sais-je )

      <header id="hautdepage"> // contenu </header>

sur ton bouton tu place une ancre

     <a href="#hautdepage">REMONTER EN HAUT</a>

et dans ton css tu met

    html, body {
        scroll-behavior: smooth;
    }
DSARRAZY
Auteur

Bonjour, problème résolu !

C'est le "overflow-x: hidden;" dans le CSS qui coinçait le scrollTop...