Bootstrap Apposer “Back to Top” Lien

Très bien, je vais avoir de la difficulté à comprendre la Bootstrap Apposer composant. Mon but est d'avoir un "Retour à la page" lien apparaît en bas à gauche de l'écran (dans la marge) si/lorsque la page défile en dessous du sommet du contenu. Ma page a une barre de navigation fixe vers le haut et un récipient pour le corps. Ci-dessous est l'idée générale de là où j'en suis, mais j'ai aussi l'installation d'un JS Fiddle qui illustre mon installation. Je ne suis pas une pro du positionnement de sorte que c'est une partie de mon problème.

<div class="navbar navbar-fixed-top">...</div>
<div class="content-container" id="top">
    <p>Content that is longer than the viewport..</p>
    <span id="top-link" data-spy="affix">
        <a href="#top" class="well well-sm">Back to Top</a>
    </span>
</div>

<style>
    .navbar-fixed-top + .content-container {
        margin-top: 70px;
    }
    .content-container {
        margin: 0 125px;
    }
    #top-link.affix {
        position: absolute;
        bottom: 10px;
        left: 10px;
    }
</style>

Jetez un oeil à markgoodyear.com/labs/scrollup/?theme=tab. Super facile à utiliser
Merci pour la suggestion @Justin, mais j'essayais de faire de la "Bootstrap façon" due à d'autres besoins ne figurant pas dans ce post/question.

InformationsquelleAutor Panman | 2014-03-14

33

Maintenant que je comprends l'Affixe de la composante mieux, j'ai trouvé la solution. Après avoir indiqué un haut offset et en ajustant le CSS, ça fonctionne bien. Le lien de défilement de l'affichage, puis "code pin" pour le bas. Pour les pages qui n'ont pas de barre de défilement, le lien n'est jamais activé. J'ai mis à jour le JS Fiddle (ici) avec un exemple de travail. Les principaux éléments sont les suivants:

HTML:
```

<span id="top-link-block" class="hidden">
    <a href="#top" class="well well-sm" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
        <i class="glyphicon glyphicon-chevron-up"></i> Back to Top
    </a>
</span>
```
JS:
```
<script>
//Only enable if the document has a long scroll bar
//Note the window height + offset
if ( ($(window).height() + 100) < $(document).height() ) {
    $('#top-link-block').removeClass('hidden').affix({
        //how far to scroll down before link "slides" into view
        offset: {top:100}
    });
}
</script>
```
CSS:
```
<style>
#top-link-block.affix-top {
    position: absolute; /* allows it to "slide" up into view */
    bottom: -82px;
    left: 10px;
}
#top-link-block.affix {
    position: fixed; /* keeps it on the bottom once in view */
    bottom: 18px;
    left: 10px;
}
</style>
```
Remarque: je n'étais pas en mesure d'utiliser le apposer en bas de décalage (exemple) pour masquer le lien pour de courtes pages en raison d'un bug avec les apposer la hauteur du conteneur de calcul (Bootstrap Question n ° 4647). Je suis sûr qu'il y est une solution de contournement et souhaite une solution à cette méthode.
- Est-ce à ($('body').outerHeight() > $(window).height()) pas de travail au lieu de ( ($(window).height() + 100) < $(document).height() ) ?
- Le point d'ajouter le décalage différence était de ne pas permettre l'Affixe composant si l'utilisateur n'aurait jamais l'atteindre. Quelques choses que je ne suis pas clair sur sont; document vs "corps" et height() vs outerHeight() lorsqu'il est utilisé sur le document.
- J'étais un peu mal à l'aide de corps, vous pouvez simplement utiliser $(document).height(); mais je comprends votre besoin maintenant. le document est le rendu de la page tandis que le corps est simplement le corps de l'élément (élément html peut avoir de remplissage ou une hauteur fixe, cela ne devrait pas affecter la hauteur du corps). hauteur() sont les éléments de la hauteur (selon méthode de zone) qui peut ou peut ne pas inclure rembourrage, tandis que la hauteur extérieure comprend padding, border et peut inclure une marge api.jquery.com/outerHeight
- Merci pour les précisions! Ainsi, la hauteur de la comparaison que je fais fonctionne très bien?
- Ouais ça va, si vous voulez obtenir à l'aise avec elle, vous pouvez changer l'ordre de 100 à la taille de l'affixe icône dynamiquement juste au cas où vous jamais changer
- Nice! Merci pour la solution!
- comment la déplacer back to top à droite de bas de page ?
InformationsquelleAutor Panman
5

merci pour le retour au haut de la touche, s'est avérée utile pour moi aussi 🙂
une petite amélioration serait d'éviter d'utiliser le onclick="" sur le <a> tag, mais au lieu d'utiliser jQuery's événement registrator:

HTML:
```
...
<a href="#top" id ="backToTopBtn" class="well well-sm">
...
```
JS:
```
 $('#backToTopBtn').click(function(){
        $('html,body').animate({scrollTop:0},'slow');return false;
    });
```
- Bon point, ce qui serait certainement une meilleure façon d'aller. J'ai juste coincé dans le onclick="" pour garder l'exemple plus courte et moins compliqué. Merci!
InformationsquelleAutor mazuno

Vous devez vous connecter pour publier un commentaire.