Comment fixer le défilement avec twitter bootstrap et liste?
Je suis en utilisant twitter bootstrap et popovers.
Je suis confronté au problème suivant: lorsque l'utilisateur clique sur un lien qui ouvre une fenêtre pop-over au bas de la page, elle fait défiler tout le chemin vers le haut de la page en premier. Cela oblige l'utilisateur à défiler l'écran vers le bas pour voir la liste ouverte. Dans les démos sur le twitter bootstrap site, je ne vois pas cela et je me demandais si je pouvais obtenir de l'aide sur ce problème.
<div class="span1" style=" width: 60px; ">
<a href="#" class="example2" rel="popover" data-html="true" data-placement="left" data-content="<a href = '/social/2lPdXV1KO4s/Bhangra indian Jingle Bells balle balle Merry Christmas'><img src='http://i4.ytimg.com/vi/2lPdXV1KO4s/hqdefault.jpg'></a>" data-original-title="Bhangra indian Jingle Bells balle balle Merry Christmas">
<img src="http://graph.facebook.com/1236870349/picture">
</a>
<div class="popover fade left in" style="top: 831px; left: 805.61669921875px; display: block;">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title">Bhangra indian Jingle Bells balle balle Merry Christmas</h3>
<div class="popover-content">
<p><a href="/social/2lPdXV1KO4s/Bhangra indian Jingle Bells balle balle Merry Christmas"><img src="http://i4.ytimg.com/vi/2lPdXV1KO4s/hqdefault.jpg"></a></p>
</div>
</div>
</div>
Vous devez vous connecter pour publier un commentaire.
L'impression que vous avez maintenant pour empêcher le comportement par défaut de la liaison car ils ont ajouté l'option pour faire apparaître la liste sur le vol stationnaire/focus. Droit maintenant, le lien va s'activer et depuis le href est pointant vers "#" il va vous apporter vers le haut de la page. Avant dans les anciennes versions, il sert à éviter ce défaut automatiquement.
Javascript de votre code devrait ressembler à quelque chose comme ceci:
Avec le html comme ceci
Ici est un travail JSfiddle. http://jsfiddle.net/hajpoj/KPU47/7/
Edit: vous pouvez également utiliser un div au lieu d'une balise d'ancrage et ne pas avoir à faire tout le prévenir par défaut de la chose.
J'ai rencontré exactement le même problème avec la liste et il suffisait de remplacer href="#" href="javascript://".
Suffit d'utiliser ce code. Pas de supplément
div
,class
ou quoi que ce soit nécessaire.Très similaire à ce que @hajpoj dit, sauf que c'est l'ordre des questions. Ainsi, c'est plus agréable de le faire parce que vous pouvez ajouter dynamiquement
.popover
éléments de la page et il va continuer à travailler.JS:
HTML:
ajouter onclick="return false;" à votre lien; il empêche le navigateur de la suite de la "#" lien: