9 views
Scroll Back Top Button
NuggaN85

8 subjects, 33 replies

Unread message
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 reply
NuggaN85

8 subjects, 33 replies

Unread message
Petite modification.

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