ancre – devfrontend.info

Source: Anchor link landing in wrong position.

Code qui pose problème:

<a name="sponsors"></a>
    <div class="sponsors">
        <div class="sponsors-left">
            <h2>Sponsors</h2>
                <p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
            </div>

<h2>Sponsors</h2>

<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>

</div>

Suggestion de correction:

I think the problem is resulting from the anchors with no contents that you are using.

Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.

I’d try sticking the fragment identifier in the actual renderable entity such as:

<h2 id="sponsors">Sponsors</h2>

1

<h2 id="sponsors">Sponsors</h2>

and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.

Réponse de l’OP:

Aha! Got it, worked a charm, thanks mate. Incidentally – I’m one of the conference organiser, no web dev! So not only will I be at the conference, but also drinking whiskey with the speakers 🙂

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)

<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>

<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>

</div>

Bloc HTML à placer juste avant le footer (dans le DOM)

<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>

<div

class="scroll-up scroll-up-bottom is-hidden"

style="width:100%">

</a>

</div>

Code JS

Edit 01/12/2017: (à priori) fonctionne sans le code ci-dessous…

// 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');
}

// 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.

//
// "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;
  }
}

// "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;

}

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;

}

Articles récents

Catégories

Archives

Méta

Étiquette : ancre

[HTML] Le positionnement d’un contenu ancré est décalé à l’écran par rapport à l’emplacement où est placé l’ancre dans le code source de la page.

[Foundation 6] Créer une ancre vers le haut de page avec le composant Sticky

Bloc HTML à placer en haut de page (dans le DOM)

Bloc HTML à placer juste avant le footer (dans le DOM)

Code JS

Code SASS