Installer Smooth Back To Top sur Blogger
Installer Smooth Back to Top sur Blogger - Sur ce tutoriel je vais vous montrer comment installer un bouton Retour au haut sur votre blog.
Le rôle et la fonction du bouton "Retour au haut" sont très importants, parce qu'il facilite la tâche des visiteurs qui souhaitent faire défiler la page en haut en cliquant simplement sur ce bouton.
Remarque : si votre modèle comporte déjà un bouton «Retour en haut» supprimez-le d'abord.
Voici les étapes de l'installation :
1. Connectez-vous à Blogger Tableau de bord >> sélectionnez Thème >> puis cliquez sur Modifier le code HTML, copiez le code ci-dessous et collez le après la balise <head> ou avant </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Si vous avez déja la bibliothèque "Font Awesome" dans votre modèle alors, ignorez la première étape pour passer à l'étape suivante.
2. Copiez le code CSS ci-dessous et collez le avant la balise ]]></b:skin> ou </style>
.smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#2ba6e1;
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:5px;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.smoothscroll-top:hover {
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
.smoothscroll-top i.fa {
line-height:inherit;
}
3. Copiez le code jQuery et HTML ci-dessous et collez le avant la balise </body>
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});
$('.smoothscroll-top').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>
4. Enregistrer le modèle et afficher les résultats.
Le bouton avec un effet de rebond supplémentaire
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});
$('.smoothscroll-top').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>Note : Pour les paramètres de couleur et autres, vous pouvez les modifier à nouveau selon vos goûts.
Félicitations !! au revoir et à bientôt !! 😊
Poster un commentaire