Scroll ou retour en haut de page : besoin d'aide pour un script [Résolu]

Messages postés
38
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
28 juin 2009
- - Dernière réponse : cs_Le Condor
Messages postés
38
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
28 juin 2009
- 25 oct. 2008 à 16:07
Bonjour à tous,

J'espère que ma demande arrive dans la section appropriée. J'étais un peu perdu.

Je recherche un moyen efficace et "confortable" pour effectuer un " scroll to top" ou un "retour en haut de page" ...
Comme ici :  Voir la petite FLECHE ROUGE à droite de l'écran >>>

J'ai essayé de récupérer la source, mais sans succès ? Ce système me conviendrait ...

Est-il possible de récupérer cette source ?
Connaissez-vous d'autres sources de qualité pour cette fonction ?
C'est bien du javascript, n'est-ce pas ?

Je remercie par avance tous ceux qui pourraient passer quelques minutes pour m'aider ou m'orienter car je suis en panne.

Merci,

Le Condor.
Afficher la suite 

20/26 réponses

Meilleure réponse
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
9
3
Merci
Bonjour à tous,
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, et comment puis-je faire une boucle avec
setTimeout</td>
</td></tr></tbody></table>si tu
veux à tout prix mettre un effet sur ta fléche, pas vraiment indispensable à mon
avis, tu peux toujours voir
DIV QUI SUIT LE SCROLLING DE LA PAGE
...la solution du position:fixed et le positionnement est bien
plus soft et fonctionne également avec le resize de la fenêtre et sqns javascript.
;O)

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 118 internautes nous ont dit merci ce mois-ci

Commenter la réponse de PetoleTeam
Messages postés
1710
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 août 2019
42
0
Merci
bonjour
pour recupere le script fait fichier enregistrer sous dans le dossier principale
le nom du fichierfloat_arrow.js  apparement c'est celui ci
Commenter la réponse de @karamel
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
bonjour,

en fait c'est assez simple.

tu ajoutes dans ta page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   

si tu veux une compatibilité avec les anciennes version des navigateurs
( ie6 par exemple et d'autres )

remplace position:fixed par position:absolute
et en javascript :

    window.onscroll=function()
    { document.getElementById("fleche").style.top = document.body.scrollTop+10+"px";

Cordialement

          Bul
Commenter la réponse de cs_bultez
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
avec fixed, % en top c'est plus mieux ?

<!--table style="width:100%;">
<tr>
<td style=" border-width:2px;
border-style:solid;
border-color:#FF8000;
font-family:Courier New;
color:#400040;
font-size:12px;
background-color:#FFEFEF;">


</td>
</tr>
</tbody>
</table-->

          Bul
Commenter la réponse de cs_bultez
Messages postés
38
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
28 juin 2009
0
Merci
Bonjour Kazma, Bonjour Bultez,



Merci beaucoup pour vos réponses.

Comme vous le savez, je voulais récupérez l'effet produit sur cette source
[c.aspx?u=aHR0cDovL2dkZXNwbGFjLmZyZWUuZnIvPzEwMDAtaWNvbmVzLXBuZy1ncmF0dWl0ZXMtYS10ZWxlY2hhcmdlciN0b3A= Voir la petite FLECHE ROUGE à droite de l'écran >>>]

J'ai essayé d'exploiter vos réponses au mieux mais je n'ai pas su reproduire l'effet dans sa totalité ...

Je voudrais vraiment récupérer l'effet flottant sur la petite flèche ... Comme vous pouvez le voir ici, je n'y suis pas parvenu >>>
La petite flèche ne bouge pas ... Pourtant j'ai réussi à récupérer le fichier arrow_float.js   mais je n'ai pas su intégrer le tout ensuite.

Pouvez-vous m'aider à passer cet obstacle ?

Merci,

Le Condor.
Commenter la réponse de cs_Le Condor
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
pas de script à récupérer !
du html+css sans rien d'autre



ça le fait ...
si tu ajoutes en début de la page, devant la balise <html> ,
le bon doctype :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

( on causera après si tu veux de la compatibilité avec
les anciennes versions des navigateurs )

essaye, et dis nous.

@+
Commenter la réponse de cs_bultez
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
quand je dis html+css, faut ajouter + javascript
ce qui figure dans le onclick="location.href='#';"

quand à, mon foie, l'effet flottant....
je ne vois pas de quoi tu causes ?

le fait que l'image se déplace si on scrolle ?
çà marche ça.
Commenter la réponse de cs_bultez
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
essaye ça ... tel qule :
<!--table style="width:100%;">
<tr>
<td style=" border-width:2px;
border-style:solid;
border-color:#FF8000;
font-family:Courier New;
color:#400040;
font-size:12px;
background-color:#FFEFEF;">


</td>
</tr>
</tbody>
</table--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

         

<script>

    // pour assurer la possibilité du scroll
    // ( + en horizontal ça baignerait aussi ) !

    for ( var n=0;n<1234; n++)

    {    document.writeln(n+"
");    }

</script>

</html>

          Bul
Commenter la réponse de cs_bultez
Messages postés
38
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
28 juin 2009
0
Merci
Merci Bultez,

Je regardes tout ça maintenant ... et je te re-contactes pour l'histoire de la compatibilité,

Merci vraiment pour tes réponses,

Le Condor.
Commenter la réponse de cs_Le Condor
Messages postés
38
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
28 juin 2009
0
Merci
Désolé, Bultez, je t'embêtes ...

Je n'arrive pas à mettre en pratique le contenu que tu me transmets ...
Peut-être aussi qu'on ne se comprends pas complètement.

Voici ce que j'ai fait:    J'ai fait 2 pages pour décomposer le souci
<ol><li>Sur la 1ère page >>>> La technique pour retourner en haut de la page marche ... mais par rapport à ce que j'appelle l'effet "flottant", il n'est pas là.</li></ol>Quand je parle d'effet flottant, je veux dire que sur la source originelle... la petite flèche rouge se déplace ... Pas ici. La flèche est localisée à un point fixe de l'écran.
Cet effet est sympa ; j'aimerai pouvoir le reproduire si celà est possible.

     2. Sur la 2ème page >>>>  J'ai un problème avec la 2ème partie du code.
Montexte se positionne à la 1234 ème ligne !

<script>
    for ( var n=0;n<1234; n++)
    {    document.writeln(n+"
");    }
</script>

Jettes un coup d'oeil au code source de mes 2 pages. Je pense avoir mis en application tes consignes mais j'ai pu commettre des erreurs. Ou avoir mal compris.

Qu'est-ce qui ne fonctionne pas ?

Merci beaucoup pour ton aide,

Le Condor
Commenter la réponse de cs_Le Condor
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
>Pas ici. La flèche est localisée à un point fixe de l'écran.

tu as bien mis le bon doctype ? ( sinon ça ne marchera pas )
quel navigateur utlise-tu ? quelle versions ?

si c'est IE6, pas exemple :
fais ce que je disais au début :

remplace position:fixed par position:absolute
et en javascript :
    window.onscroll=function()
    { document.getElementById("fleche").style.top = document.body.scrollTop+10+"px";

          Bul
Commenter la réponse de cs_bultez
Messages postés
38
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
28 juin 2009
0
Merci
... alors, je suis avec IE7 ou avec Mozilla/5.0 (Firefox 2.0.0.17)

Bon, je regarde plus précisément le contenu de ton message.

L'objectif serait que celà marche avec le maximum de versions bien sûr.

Je reste là ...

Le Condor.
Commenter la réponse de cs_Le Condor
Messages postés
38
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
28 juin 2009
0
Merci
Comme tu le vois sur la source, j'ai mis çà en Doctype, comme tu me l'avais demandé ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Commenter la réponse de cs_Le Condor
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
ah ben alors...
IE7 ça baigne ! chez moi ... et FF, même 2, ça doit baigner
( je ne peut pas dire j'ai FF3 avec qui ça baigne aussi )

mais si tu veux compatibilité avec IE6 et autres vieilles versions :

<html>

[#
        ]

<script type="text/javascript">
    for ( var n=0;n<1234; n++)                   // toujours pour qu'on
    {    document.writeln(n+"
");    }      // puisse tester le scroll !!

    var haut=parseInt(document.getElementById("imag").style.top,10);
    window.onscroll=function()
    { document.getElementById("imag").style.top=document.body.scrollTop+haut; }

</script>

</html>

sans doctype !!  ou pas un strict !!    ;o))

          Bul
Commenter la réponse de cs_bultez
Messages postés
38
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
28 juin 2009
0
Merci
"  sans doctype !!  ou pas un strict !!  "

> Donc là, tu modifies ta consigne n'est-ce pas par rapport au doctype ?

Le Condor
Commenter la réponse de cs_Le Condor
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
uniquement pour la version compatible avec IE6 et autres vieilles versions
    ( onscroll en javascript, le dernier exemple mis quoi )

avec position:fixed, il faut laisser le doctype



          Bul [mon Site] [M'écrire]         
Commenter la réponse de cs_bultez
Messages postés
38
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
28 juin 2009
0
Merci
Ou alors, on ne se comprend pas ...

Quand je dis que la flèche ne bouge pas ... Je ne veux pas dire qu'elle quitte l'écran et devient invisible,

Elle reste bien présente à l'écran ... et accomplit sa fonction de "retour haut de page", mais c'est juste sont mouvement de flottement de bas en haut qui est perdu... Ce mouvement qu'on trouvait sur la page d'origine .... Lorsqu'on montait ou descendait avec l'ascenceur, la flèche passait prenait 1 à 2 secondes pour retrouver l'emplacement qui lui était assigné.

Je pense qu'on s'est compris mais bon ... J'ai été incapable de la faire.
J'essaie encore;

Merci,

Le Condor
Commenter la réponse de cs_Le Condor
Messages postés
38
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
28 juin 2009
0
Merci
Donc si je te suis ... je dois faire un choix entre une compatibilité avec IE7 avec Doctype ... ou une compatibilité avec IE6 sans Doctype ...

Je pensait qu'au final, je pourrais avoir une seule version compatible avec les deux ?

Beaucoup de personnes utilisent encore IE6 ?

Le condor
Commenter la réponse de cs_Le Condor
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
avec un doctype non strict, par exemple:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
( ou sans, ça fonctionnera avec tous )
          Bul
Commenter la réponse de cs_bultez
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
quand je dis "compatible avec les vieilles versions",
         compatible s'entend par rapport aux ( avec les ) versions actuelles.
sinon j'aurais dit : exclusif.
 
          Bul
Commenter la réponse de cs_bultez