Discussion :

[dhillig]

Bonjour à tous,
Impossible d'appliquer la class scrollto à une icone (ical).
Ligne initiale :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a id="ical" href="#top"><i class="fa fa-twitter fa-2x"></i></a></div>

J'ai tenté :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="ical"><i class="scrollTo"><a href="#top"><i class="fa fa-chevron-down fa-2x"></i></a> </i></div>

Puis :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class=»scrollTo» href=»#top»><i class=»fa fa-twitter fa-2x»></i></a>

Rien à faire, je sais que ce n'est pas grand chose, vraiment tout bête mais je n'y arrive pas. Can you help me please ?
Thanks
Dhillig

[jreaux62]

Bonjour,

déjà, corrige les guillemets, qui ne sont manifestement pas les bons.

[dhillig]

Bonjour jreaux62,
Cela fait des années que j'ai arrêté mon site, et donc pas échangé avec toi. J'ai décidé de m'y remettre, le travail accompli grâce à ton aide et à celle de NoSmoking (et d'autres) était vraiment bien
Je ne sais pas d'où vient cette classe Scrollto !!!!????
Je l'ai supprimée. Cela devient donc :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="ical"><a href="#top"><i class="fa fa-chevron-down fa-2x"></i></a></div>

Mais le chevron-down ne scrolle pas jusqu'à <a href="#top"> il y arrive, mais sans scroll.
Je pensais que c'était un prob de classe, mais pas du tout !
Si tu as une idée... en attendant, je considère le problème comme résolu.
Merci pour tes conseils et bon week-end,
Dhillig

[jreaux62]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="scrollTo" href="#top">

A mon avis, c'est justement cette classe "scrollTo" qui permet de scroller "souplement" vers l'élément d'id "#top".

Il est plus que probable qu'il existe un script JS qui utilise cette classe.

Le script JS devrait ressembler à ça (ici en JS pur) :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
// ----------
// JS vanilla
window.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll('.scrollTo').forEach( (elt) => {
    elt.addEventListener('click', (e) => {
      e.preventDefault(); // important
      document.querySelector(elt.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
    });
  });
});
// ----------

ou en jQuery :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
// ----------
// jQuery
$(function(){
  $('.scrollTo').on( 'click', function(e){
    e.preventDefault(); // important
    $('html').stop().animate({
      'scrollTop': $($(this).attr('href')).offset().top
    }, 500);
  });
});
// ----------

• https://codepen.io/jreaux62/pen/xxLLPKd

[dhillig]

Je ne vois pas de réponse de ma part alors que je suis certain de t'avoir répondu !?????
Je suis loin de mes fichiers html/CSS/JS. Je te (re)répond mardi.
En attendant, MERCI et sache(z) qu'à l'époque, je testais à droite, à gauche mais que LA, j'ai une idée bien définie du site que je veux créer.
J'ai, grâce au forum, déjà créé un petit site que j'ai du supprimer à cause de ce maudit IE. N'être vu que par une partie des gens, c'est inutile.
A mardi j'espère !
Bon week-end à tous !
dh

[dhillig]

Bonjour jreaux62,
Je n'ai pas réussi à adapter ton code à ma page.
Alors je l'ai mis en ligne :
http://lapagetest.fr/lddc.html
La première image s'affiche très bien en local, pas du tout en ligne, malgré de multiples changements.
Comme tu peux voir, en cliquant sur le chevron, la page ne scrolle pas.
As-tu une idée ?
Merci pour ton aide et bonne journée,
dh

La première photo s'affiche bien, c'était un problème de casse (.JPG, .jpg).
Bonne journée !