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.
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}};
}
En cliquant sur le lien "remonter en haut", je veux remonter en haut de la page.
Le code ne fonctionne pas, mais le code à été testé sur codepen.io et il fonctionne.
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;
}
Bonjour, problème résolu !
C'est le "overflow-x: hidden;" dans le CSS qui coinçait le scrollTop...