src/PortalBundle/Resources/views/arrow-top.html.twig line 1

Open in your IDE?
  1. {% block css %}
  2.     <style>
  3.         button.back-to-top {
  4.             margin: 0 !important;
  5.             padding: 0 !important;
  6.             background: #fff;
  7.             height: 0px;
  8.             width: 0px;
  9.             overflow: hidden;
  10.             border-radius: 5px;
  11.             color: transparent;
  12.             clear: both;
  13.             visibility: hidden;
  14.             position: fixed;
  15.             cursor: pointer;
  16.             display: block;
  17.             border: none;
  18.             right: 50px;
  19.             bottom: 75px;
  20.             font-size: 0px;
  21.             outline: 0 !important;
  22.             z-index: 99;
  23.             transition: all .2s ease-in-out;
  24.         }
  26.         button.back-to-top:hover,
  27.         button.back-to-top:active,
  28.         button.back-to-top:focus {
  29.             outline: 0 !important;
  30.         }
  32.         button.back-to-top::before {
  33.             content: "";
  34.             background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDZMNS45MDEyNSAxLjE5Mzc0TTExIDUuODA2MjZMNi4wOTg3NSAxIiBzdHJva2U9IiNFNDBDMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K);
  35.             width: 11px;
  36.             height: 6px;
  37.             position: absolute;
  38.             background-position: center;
  39.             background-repeat: no-repeat;
  40.             background-size: cover;
  41.             top: 50%;
  42.             left: 50%;
  43.             margin-right: -50%;
  44.             transform: translate(-50%, -50%);
  45.         }
  47.         button.back-to-top:hover::before {
  48.             background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDZMNS45MDEyNSAxLjE5Mzc0TTExIDUuODA2MjZMNi4wOTg3NSAxIiBzdHJva2U9IndoaXRlIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==);
  49.         }
  51.         button.back-to-top.show::after,
  52.         button.back-to-top.show::before {
  53.             visibility: visible;
  54.         }
  56.         button.back-to-top::after {
  57.             border-bottom-color: #fff;
  58.             position: relative;
  59.             top: -23px;
  60.         }
  62.         button.back-to-top.show {
  63.             display: block;
  64.             background: #fff;
  65.             font-size: 25px;
  66.             right: 38px;
  67.             bottom: 90px;
  68.             height: 25px;
  69.             width: 50px;
  70.             visibility: visible;
  71.             box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
  72.         }
  74.         button.back-to-top.show:hover {
  75.             background: #E40C25;
  76.         }
  78.         @media (max-width: 570px) {
  79.             button.back-to-top.show {
  80.                 right: 22px;
  81.                 bottom: 125px;
  82.             }
  83.         }
  85.         @media (max-height: 700px) {
  86.             button.back-to-top.show {
  87.                 right: 23px;
  88.                 bottom: 120px;
  89.             }
  90.         }
  93.     </style>
  94. {% endblock %}
  96. <button class="back-to-top" type="button"></button>
  98. {% block pageJS %}
  99.     <script>
  100.         let amountScrolled = 200;
  101.         let amountScrolledNav = 25;
  103.         $(window).scroll(function () {
  104.             if ($(window).scrollTop() > amountScrolled) {
  105.                 $('button.back-to-top').addClass('show');
  106.             } else {
  107.                 $('button.back-to-top').removeClass('show');
  108.             }
  109.         });
  111.         $('button.back-to-top').click(function () {
  112.             $('html, body').animate({
  113.                 scrollTop: 0
  114.             }, 800);
  115.             return false;
  116.         });
  117.     </script>
  118. {% endblock pageJS %}