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

cs_Le Condor 38 Messages postés samedi 27 janvier 2007Date d'inscription 28 juin 2009 Dernière intervention - 18 oct. 2008 à 14:57 - Dernière réponse : cs_Le Condor 38 Messages postés samedi 27 janvier 2007Date d'inscription 28 juin 2009 Dernière intervention
- 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 

26 réponses

Répondre au sujet
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 25 oct. 2008 à 07:19
+3
Utile
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)
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de PetoleTeam
@karamel 1654 Messages postés vendredi 9 mai 2008Date d'inscription 23 février 2018 Dernière intervention - 18 oct. 2008 à 15:50
0
Utile
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
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 18 oct. 2008 à 16:02
0
Utile
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
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 18 oct. 2008 à 16:37
0
Utile
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
cs_Le Condor 38 Messages postés samedi 27 janvier 2007Date d'inscription 28 juin 2009 Dernière intervention - 19 oct. 2008 à 13:02
0
Utile
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
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 19 oct. 2008 à 15:21
0
Utile
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
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 19 oct. 2008 à 15:24
0
Utile
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
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 19 oct. 2008 à 15:31
0
Utile
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
cs_Le Condor 38 Messages postés samedi 27 janvier 2007Date d'inscription 28 juin 2009 Dernière intervention - 19 oct. 2008 à 15:57
0
Utile
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
cs_Le Condor 38 Messages postés samedi 27 janvier 2007Date d'inscription 28 juin 2009 Dernière intervention - 19 oct. 2008 à 16:47
0
Utile
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
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 19 oct. 2008 à 17:12
0
Utile
>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
cs_Le Condor 38 Messages postés samedi 27 janvier 2007Date d'inscription 28 juin 2009 Dernière intervention - 19 oct. 2008 à 17:19
0
Utile
... 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
cs_Le Condor 38 Messages postés samedi 27 janvier 2007Date d'inscription 28 juin 2009 Dernière intervention - 19 oct. 2008 à 17:21
0
Utile
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
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 19 oct. 2008 à 18:15
0
Utile
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
cs_Le Condor 38 Messages postés samedi 27 janvier 2007Date d'inscription 28 juin 2009 Dernière intervention - 19 oct. 2008 à 18:31
0
Utile
"  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
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 19 oct. 2008 à 18:50
0
Utile
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
cs_Le Condor 38 Messages postés samedi 27 janvier 2007Date d'inscription 28 juin 2009 Dernière intervention - 19 oct. 2008 à 18:54
0
Utile
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
cs_Le Condor 38 Messages postés samedi 27 janvier 2007Date d'inscription 28 juin 2009 Dernière intervention - 19 oct. 2008 à 19:03
0
Utile
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
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 20 oct. 2008 à 09:12
0
Utile
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
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 20 oct. 2008 à 09:18
0
Utile
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

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Scroll ou retour en haut de page : besoin d'aide pour un script - page 2