J'ai récemment travaillé sur un petit blog et je souhaite que les articles de blog consécutifs soient accessibles depuis un accordéon (exemple ci-dessous). De cette façon, vous pouvez rapidement parcourir les titres des articles, en sélectionner un qui vous intéresse et le lire. Lorsque vous avez terminé, vous pouvez revenir en toute transparence au survol sans navigation inutile dans les menus.
Mon problème est qu'une fois que vous avez terminé de lire un article et que vous avez cliqué sur un deuxième, je ne peux pas ouvrir le deuxième article en haut , avec le titre visible. Puisque vous avez déjà fait défiler jusqu'à présent pour lire le premier article, vous ouvrez les 2/3 du deuxième article. Cela oblige l'utilisateur à faire défiler tout le chemin vers le haut d'un message qu'il n'a pas encore lu. Pour une raison quelconque, je n'arrive pas à faire fonctionner quoi que ce soit; tout conseil serait très apprécié!
MISE À JOUR: Il s'avère que depuis que j'utilisais la version slim de jQuery, les fonctions que j'essayais d'utiliser n'étaient pas disponibles. Maintenant que j'ai dépassé cet obstacle, tout se compile mais je ne peux pas forcer la page à défiler au bon endroit.
Ma solution la plus proche est celle-ci, qui remontera jusqu'au premier card-header quand une nouvelle section est ouverte (alors que je veux le card-header code> qui a été cliqué).
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="container">
<div class="card">
<a class="card-header" data-toggle="collapse" href="#sec1">Title1</a>
<div id="sec1" class="collapse" data-parent="#container">
<div class="card-body">
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
</div>
</div>
</div>
<div class="card">
<a class="card-header" data-toggle="collapse" href="#sec2">Title2</a>
<div id="sec2" class="collapse" data-parent="#container">
<div class="card-body">
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
</div>
</div>
</div>
</div> Ce que j'essaie de faire est logiquement équivalent à ceci, mais ce code exact ne défile pas du tout (il se compile correctement, et remplace $ ( this) avec $ (event.target) ou $ (event.target) .parent () ne fonctionne pas non plus).
XXX
Voici un exemple de travail minimal pour reproduire mes difficultés:
$(".card-header").click(function(event) {
$('html, body').animate({
scrollTop: $(this).offset().top-60
}, 300);
3 Réponses :
J'ai ajouté l'ID à la balise div de Cela fonctionne pour moi. Vous n'avez pas besoin de tout remplacer. à et j'ajoute javascrip: $(".card-header").click(function () {
$('html, body').animate({
scrollTop: $("#div2").offset().top
}, 2000);
});
Cela fonctionne pour un seul lien, mais je recherche une solution générale qui défile jusqu'à l'en-tête cliqué, donc je n'aurai pas à copier-coller ce code pour chaque carte. J'ai mis à jour ma question pour inclure plus de détails.
A utiliser en événement
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
$(document).ready(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
});
Amusez-vous
cela vous dérangerait-il d'expliquer comment cela défile jusqu'à un élément cliqué?
S'il vous plaît voir la question du message: Faites défiler vers le haut de l'accordéon bootstrap lorsqu'il est ouvert
Faites toujours défiler vers le haut du décalage de l'élément de réduction d'ouverture. Si l'effondrement de clôture si au-dessus de l'effondrement d'ouverture, soustrayez la hauteur de l'effondrement de fermeture du offset-top du repli d'ouverture.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height:30px"></div>
<div class="container" id="container">
<div class="card">
<a class="card-header" data-toggle="collapse" href="#sec1">Title1</a>
<div id="sec1" class="collapse" data-parent="#container">
<div class="card-body">
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
</div>
</div>
</div>
<div class="card">
<a class="card-header" data-toggle="collapse" href="#sec2">Title2</a>
<div id="sec2" class="collapse" data-parent="#container">
<div class="card-body">
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
</div>
</div>
</div>
</div>
jQuery(function($){
$('.card-header').each(function(){
let $card_header = $(this);
let $collapse_element = $card_header.next();
$collapse_element.on('show.bs.collapse', function () {
let $card_header_top = $card_header.offset().top;
let $visible_collapse = $('.collapse.show');
if($visible_collapse.length){
let $visible_collapse_top = $visible_collapse.offset().top;
if($visible_collapse_top < $card_header_top){
$card_header_top -= $visible_collapse.height();
}
}
$([document.documentElement, document.body]).animate({
scrollTop: $card_header_top
});
});
});
});