templates/AppTemplates/layout/topTop.html.twig line 1

Open in your IDE?
  1. <style>
  2. #backToTopBtn {
  3.   display: none;
  4.   position: fixed;
  5.   bottom: 70px;
  6.   right: 0%;
  7.   width: 40px;
  8.   height: 40px;
  9.   font-size: 24px;
  10.   background-color: #fca311;
  11.   color: #14213d;
  12.   border: none;
  13.   cursor: pointer;
  14.   opacity:0;
  15.   transition: opacity 0.3s ease-in-out;
  16.   animation:1s;
  17.   display:flex;
  18.   justify-content:center;
  19.   align-items:center;
  20.   z-index:100030;
  21. }
  23. #backToTopBtn i {
  24.   font-size:16px;
  25.   color:white;
  26. }
  28. .showBtn {
  29.   opacity: 1!important;
  30. }
  31. </style>
  33. <button onclick="scrollToTop()" id="backToTopBtn" title="Retour en haut" data-aos="fade-left">
  34.   <i class="fas fa-long-arrow-alt-up"></i>
  35. </button>
  37. <script>
  38.     function scrollToTop() {
  39.     window.scrollTo({
  40.         top: 0,
  41.         behavior: "smooth"
  42.     });
  43.     }
  45.     window.addEventListener("scroll", function() {
  46.     // button back to top
  47.     var button = document.getElementById("backToTopBtn");
  48.     // div share
  49.     var share  = document.querySelector('.share');
  50.     // var i de H avec la classe special
  51.     var ispeci = document.querySelector('.eNavigation');
  53.     // function
  54.     if (window.scrollY > 300) {
  55.         button.classList.add('showBtn');
  56.         share.classList.add('showBtn')
  57.     } else {
  58.         button.classList.remove('showBtn');
  59.         share.classList.remove('showBtn');
  60.     }
  62.     // function
  63.     if (window.scrollY > 550) {
  64.     } else {
  65.     }
  67. });
  68. </script>