Attention: merde lorsqu’on utilise des composants de type Accordéon, etc … (lorsque la hauteur de page s’agrandit) !!
Sur chaque page du site, une fonctionnalité de scroll automatique/retour vers le haut de page peut-être ajoutée en exploitant le composant Sticky de Foundation 6. Ce lien de retour devrait apparaître dès qu’un scroll est nécessaire et serait fixé en bas de page sur la limite haute du bloc footer.
Bloc HTML à placer en haut de page (dans le DOM)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="row" data-sticky-container=""> <div class="sticky scroll-up" data-sticky="" style="width:100%" data-container-class="scroll-up-sticky-container" data-sticky-on="small" data-stick-to="bottom" data-top-anchor="1200" data-btm-anchor="content-block:bottom"> <a href="#top"> <i class="iconfont iconfont-angle-up" /> </a> </div> </div> |
Bloc HTML à placer juste avant le footer (dans le DOM)
|
1 2 3 4 5 6 7 8 9 |
<div class="row"> <div class="scroll-up scroll-up-bottom is-hidden" style="width:100%"> <a href="#top"> <i class="iconfont iconfont-angle-up" /> </a> </div> </div> |
Code JS
Edit 01/12/2017: (à priori) fonctionne sans le code ci-dessous…
|
1 2 3 4 5 6 7 |
// fonction Scroll vers le haut // Quand la page n'est pas assez haute pour justifier l'affichage de l'ancre var pageBoxInfo = Foundation.Box.GetDimensions(document.getElementById('top')); // 1200 is "data-top-anchor" attribute value from "Bloc HTML à placer en haut de page (dans le DOM)" if( pageBoxInfo.height >= 1200 ) { $('.scroll-up-bottom').removeClass('is-hidden'); } |
Code SASS
A noter: la présence de la propriété pointer-events sur .scroll-up.sticky.is-at-bottom et .scroll-up a pour éviter que les éléments qui se trouvent sous la zone (à 100% de largeur) du sticky soient bloqués au clic. <a href="https://caniuse.com/#search=pointer-events">pointer-events</a> ne fonctionnera pas sous IE10 et en-dessous, mais on s’en b*% l$! c*ù|!!€%.
A noter #2: la présence de la propriété // margin-right: -25%; sur .scroll-up a pour permettre de positionner à sa guise le lien.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
// // "scroll to top" feature .scroll-up { &.sticky { display: none; &.is-at-bottom { display: block; pointer-events: none; } } text-align: right; &-sticky-container { height: 0px !important; } a{ display: inline-block; text-align: center; color: #fff; background: $primary-color; pointer-events: all; // margin-right: -25%; @include breakpoint(medium down) { $scroll-up-width: 35px; width: $scroll-up-width; height: $scroll-up-width; line-height: $scroll-up-width; font-size: rem-calc($scroll-up-width/1.5); } @include breakpoint(large) { $scroll-up-width: 70px; width: $scroll-up-width; height: $scroll-up-width; line-height: $scroll-up-width; font-size: rem-calc($scroll-up-width/1.5); } } &-bottom { border-bottom: 2px solid #fff; margin-bottom: -$base-spacing-small; } } |