Maison >interface Web >Tutoriel d'amorçage >Comment remettre la page en haut de l'invite de survol dans le bootstrap
Comment remettre la page en haut de l'invite de survol dans le bootstrap
- 尚original
- 2019-07-27 16:12:354878parcourir
Comment revenir à l'invite de survol supérieure sur la page des paramètres d'amorçage est la suivante :
1. " bouton dans le corps
<body> <div class="go-top"> <div class="arrow"></div> <div class="stick"></div> </div> </body>
2. Définition CSS
div .go-top {
display: none;
opacity: 0.6;
z-index: 999999;
position: fixed;
bottom: 113px;
left: 90%;
margin-left: 40px;
border: 1px solid #a38a54;
width: 38px;
height: 38px;
background-color: #eddec2;
border-radius: 3px;
cursor: pointer;
}
div .go-top:hover {
opacity: 1;
filter: alpha(opacity=100);
}
div .go-top div .arrow {
position: absolute;
left: 10px;
top: -1px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #cc3333;
}
div .go-top div .stick {
position: absolute;
left: 15px;
top: 15px;
width: 8px;
height: 14px;
display: block;
background-color: #cc3333;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}Utilisez un positionnement fixe pour que le bouton apparaisse toujours dans le coin inférieur droit. En définissant left:90%, le bouton peut apparaître sur vers la droite sans être trop serré. Fixez les barres de défilement.
3. Le bouton est invisible par défaut. Lorsque la page défile jusqu'à une certaine hauteur, le bouton apparaît
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 1000)
$('div.go-top').show();
else
$('div.go-top').hide();
});
$('div.go-top').click(function() {
$('html, body').animate({scrollTop: 0}, 1000);
});
});Recommandé : Tutoriel de démarrage de Bootstrap
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!