J'ai un défilement de page inattendu lorsque j'essaie de réduire ou de développer des éléments de l'accordéon. Peut-être que je viens de faire quelque chose de mal avec le système de grille bootstrap? Voici un exemple de page:
Comment puis-je éviter cet effet irritant?
jsfiddle disponible https://jsfiddle.net/Lfwvtyms/1/
<body>
<!--default navbar here-->
<main>
<h1>Long long long long long long header header header header header header lng lasd lewq j</h1>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="task-list">
<div id="accordion" role="tablist" aria-multiselectable="true" class="panel-group">
<div class="panel panel-default">
<div id="headingOne" role="tab" class="panel-heading"><h4 class="panel-title"><a
data-toggle="collapse" data-target="#collapseOne" href="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">First list</a></h4></div>
<div id="collapseOne" role="tabpanel" aria-labelledby="headingOne"
class="panel-collapse collapse in">
<ul class="list-group">
<li class="list-group-item">Item1</li>
<li class="list-group-item">Item2</li>
<li class="list-group-item">Item3</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div id="headingTwo" role="tab" class="panel-heading"><h4 class="panel-title"><a
data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">Another list</a></h4></div>
<div id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo"
class="panel-collapse collapse in">
<ul class="list-group">
<li class="list-group-item">Item1</li>
<li class="list-group-item">Item2</li>
<li class="list-group-item">Item3</li>
</ul>
</div>
</div>
</div>
</div>
<div id="someDiv">
<div class="row">
<div class="col-xs-12">
<div id="dummy">Div with fixed height here</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid">my footer here</footer>
</body>
J'ai eu le même problème (sautez au sommet en cliquant sur le lien qui déclenchait la bascule effondrement) Le href="#"
a été changé en href="javascript:void(0);"
et fonctionne très bien (basculement en effondrement sans défilement vers le haut)
Remplacez les propriétés href
des éléments a
par #
plutôt que, par exemple, #collapseOne
.
au lieu de cela:
<a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">
fais ça
<a data-toggle="collapse" data-target="#collapseTwo" href="#"
aria-expanded="true" aria-controls="collapseTwo">
J'ai eu le même problème. Il s'avère que le href cause le problème. Si vous ne voulez pas que la page défile du tout quand vous réduisez/développez, ce que je voulais, alors supprimez simplement le href. Le laisser comme # faisait toujours défiler l'écran vers le haut pour moi.
n'a pas travaillé pour moi:
<a data-toggle="collapse" data-target="#collapseOne" href="#SectionOne"></a>
<a data-toggle="collapse" data-target="#collapseOne" href="#"></a>
travaillé:
<a data-toggle="collapse" data-target="#collapseOne"></a>
Voir ma mise à jour ici: https://jsfiddle.net/Lfwvtyms/5/
J'ai eu le même problème et j'ai trouvé ma solution avec cette réponse sur un autre post.
Rien d’autre n’a fonctionné, à part ce petit morceau de Javascript ajouté à mon fichier .js personnalisé. Cela ramène en douceur le focus sur le titre du panneau sélectionné. La seule chose que j'ai modifiée pour correspondre à mon design était la distance au sommet, sur la ligne 6.
https://stackoverflow.com/a/38180220/4844273
$('#accordion').on('shown.bs.collapse', function () {
var panel = $(this).find('.in');
$('html, body').animate({
scrollTop: panel.offset().top - 130
}, 500);
});
Une autre option consiste à utiliser des boutons au lieu de liens d’ancrage, afin que href
ne soit pas déclenché en premier lieu. Par exemple, au lieu du premier <a>
:
<button data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
First list
</button>
Il y a beaucoup d'exemples utilisant <button>
au lieu de <a>
dans cette documentation .
$('.panel-group').on('click', function(){
$('html,body').stop();
});
Cela fonctionnerait certainement si vous êtes sur des options.
Vous pouvez remplacer le gestionnaire de clics et utiliser la méthode preventDefault()
sur l'événement click:
$('.aHandler').click( function(event) {
event.preventDefault();
...
});
Où 'aHandler' est une classe sur vos balises 'a': <a class="aHandler" ...>...</a>
, ou est un autre sélecteur jquery valide .