16 vues
Scroll Back Top Button
NuggaN85

8 sujets, 33 réponses

Message non lu
Hey,

Voici un petit morceau de code pour mettre en place un bouton scroll back top en bas de page pour remonter au top plus facilement :)

Une intégration d'un media only screen pour retirer automatiquement le bouton sur mobile.

avant toute chose veuillez créer un dossier overrides sauf si vous avez déjà ce dossier.

En suite dans le dossier overrides mettre c'est sous dossiers neofrag/views/theme/main.tpl.php

En suite modifier le fichier main.tpl.php mettre le code complet ci dessous entre </body> & </html>

<a id="button"></a>
<style type="text/css">
.element {
content-vesibility:auto;
}
@media only screen
and (min-width: 1200px) {
#button {
display: inline-block;
background-color: #dc3545;
border-color: #dc3545;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 50px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: "\002191";
position: relative;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #212529;
}
#button:active {
background-color: #212529;
}
#button.show {
opacity: 1;
visibility: visible;
}
</style>
<script type="text/javascript">
var btn = $('#button');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});
</script>

Démo : ICI
1 participant
1 réponse
NuggaN85

8 sujets, 33 réponses

Message non lu
Petite modification.

Une intégration d'un media only screen pour retirer automatiquement le bouton sur mobile.