Aller au contenu


ancre html


  • Please log in to reply
5 replies to this topic

#1 Invité_sep_*

Invité_sep_*
  • Guests

Posté 08 juin 2012 - 19:09

Bonjour,
j'ai dans ma page html une div de hauteur fixe qui contient un texte assez long et qui défile avec un ascenseur.
j'ai placé en debut de texte des lignes qui renvoient vers des parties de texte à l'aide d'ancres.
Quand je clique sur une de ces lignes l'ancre me renvoit vers la partie de texte qui correspond, mais c'est aussi la fenetre qui "scroll" alors que je voudrais que ce soit uniquement la div qui scroll, même probleme avec l'ancre qui renvoit au debut du texte, toute la fenetre scroll. En gros je voudrais que seule la div sroll et que la fenetre (la page) reste fixe (toujours visible dans sa totalité)
Merci d'avance.

#2 FJA

FJA

    Maniaque du clavier

  • Membres
  • PipPipPipPip
  • 565 Messages :
  • Configuration:iMac [iMac5,1 (Intel Core 2 Duo)]
    MBA [MacBookAir4,2 (i5, 13,3")]
  • Sexe:Masculin
  • Localisation:Lille

Posté 09 juin 2012 - 00:15

Salut,

La solution qui me vient a l'esprit c'est scrollIntoView en javascript :
<div id="parent" style="height: 200px; overflow: auto">
    <div id="a" style="height: 150px; background: red;">a</div>
    <div id="b" style="height: 150px; background: green;">b</div>
    <div id="c" style="height: 150px; background: blue;">v</div>
</div>
<button onclick="document.getElementById('a').scrollIntoView(document.getElementById('parent'))">a</button>
<button onclick="document.getElementById('b').scrollIntoView(document.getElementById('parent'))">b</button>
<button onclick="document.getElementById('c').scrollIntoView(document.getElementById('parent'))">c</button>



#3 BorakLeRouge

BorakLeRouge

    Hamster d'or (dort ?)

  • Membres
  • PipPipPipPipPipPipPip
  • 3 946 Messages :
  • Configuration:Mac Mini Core i7 - 16Go - 2To Hybride
  • Sexe:Masculin
  • Localisation:Cormeilles en Parisis.rb
  • Passions:Macintosh, Photo, Haute-fidélité, Ski, Roller, Call of Duty, Tactical Ops, Counter Strike, Worms 1

Posté 09 juin 2012 - 00:25

Il me semble bien qu'il faut passer par du Javascript, mais ta solution n'a pas l'air de marcher Amarok... (je viens de tester sur Chrome et Firefox).

OUPS, Ah si, la solution marche très bien, j'avais mal collé le script et récupérer un saut de ligne intenpestif.

Bravo

Ce message a été modifié par BorakLeRouge - 09 juin 2012 - 00:27 .

Je fais mes sauvegardes sur NSA-Cloud !

Au bout de 10 ans, le vieux MacPro vient de laisser sa place à un MacMini i7...


#4 Amarok II

Amarok II

    NeoAdmin

  • Administrateurs
  • PipPipPipPipPipPip
  • 1 463 Messages :
  • Configuration:Un petit truc en alu avec un grand rectangle lumineux qui affiche des choses qui bougent quand je chatouille un autre truc en alu, là... tout plat.
  • Sexe:Mystère
  • Localisation:Perpignan, France
  • Passions:MacFr bien sûr !

Posté 09 juin 2012 - 10:06

j'ai dans ma page html une div de hauteur fixe qui contient un texte assez long et qui défile avec un ascenseur.


tu pourrais aussi déléguer le scroll de ton div à la page de ton site...
je pense qu'à la base, c'est un souci de conception, tu aurai un lien que l'on puisse se rendre compte ?



MacBook Pro (13", fin 2012)
8Go RAM - 256Go SSD - 1To HD

Technicien certifié ACMT et plein d'autres trucs...

"On peut voir de bien des façons. On peut être aveugle de bien des façons." (Frank Herbert, Dune)

"Tu ne feras point de machine à l'esprit de l'homme semblable." (Frank Herbert, Dune)


#5 FJA

FJA

    Maniaque du clavier

  • Membres
  • PipPipPipPip
  • 565 Messages :
  • Configuration:iMac [iMac5,1 (Intel Core 2 Duo)]
    MBA [MacBookAir4,2 (i5, 13,3")]
  • Sexe:Masculin
  • Localisation:Lille

Posté 09 juin 2012 - 18:27

[…] récupérer un saut de ligne intenpestif. […]


Oui j'ai pas compris pourquoi les sauts de ligne on été rajouté, dans le code d'origine il n'y en a pas de saut de ligne après getElementById('


#6 Amarok II

Amarok II

    NeoAdmin

  • Administrateurs
  • PipPipPipPipPipPip
  • 1 463 Messages :
  • Configuration:Un petit truc en alu avec un grand rectangle lumineux qui affiche des choses qui bougent quand je chatouille un autre truc en alu, là... tout plat.
  • Sexe:Mystère
  • Localisation:Perpignan, France
  • Passions:MacFr bien sûr !

Posté 09 juin 2012 - 21:56

Bon, je viens de faire un test viteuf, ça fonctionne très bien chez moi sans javascript.
Voici le code :
<div id="parent" style="height: 200px; overflow: auto;">
	<a name="top"/>
	<a href="#a">#a</a>
	<a href="#b">#b</a>
	<a href="#c">#c</a>

    <a name="a"/><div id="a" style="height: 250px; background: #eee;">a<br /><a href="#top">#top</a></div>
    <a name="b"/><div id="b" style="height: 250px; background: #ddd;">b<br /><a href="#top">#top</a></div>
    <a name="c"/><div id="c" style="height: 250px; background: #ccc;">c<br /><a href="#top">#top</a></div>
</div>


MacBook Pro (13", fin 2012)
8Go RAM - 256Go SSD - 1To HD

Technicien certifié ACMT et plein d'autres trucs...

"On peut voir de bien des façons. On peut être aveugle de bien des façons." (Frank Herbert, Dune)

"Tu ne feras point de machine à l'esprit de l'homme semblable." (Frank Herbert, Dune)





1 utilisateur(s) en train de lire ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)