|
18 vues
Scroll Back Top Button |
|
|---|---|
|
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 |
|
