9
votes

Lien profond vers une position dans une page, en utilisant Meteor JS

J'ai une application météore avec plusieurs pages. Je veux être capable de diapeler un ancrage quelque part à mi-chemin de la page.

Traditionnellement, dans la normale HTML, vous feriez un endroit dans votre page, et associez-y via /myyage.html#Chapter5.

Si je fais cela, mon application météore ne fait pas défiler jusqu'à cet endroit.

Quelle est la meilleure approche autour de cela?

meteor

0 commentaires

4 Réponses :

4
votes

Utilisez-vous une sorte de routeur JavaScript? Météor routeur?

Vous pouvez utiliser quelque chose comme une méthode de défilement basée sur JavaScript. Un tel exemple est avec jQuery: (vous pouvez placer cela dans votre lien / boutons, cliquez sur Handler) P>

<h1 id="item_id">Section X</h1>

1 commentaires

J'utilise le routeur de la colonne vertébrale oui. Ce serait bien que ce code est exécuté au moment de la charge de la page, mais que je peux faire. Je vais essayer ceci, merci.

7
votes

La réponse de @Akshat fonctionne sur la même page, mais si vous voulez pouvoir passer autour d'une URL avec un "#"? Je l'ai fait comment le météore Docs a fait.

Template.myTemplate.rendered = function() {
  var hash = document.location.hash.substr(1);
  if (hash && !Template.myTemplate.scrolled) {
  var scroller = function() {
    return $("html, body").stop();
  };

  Meteor.setTimeout(function() {
    var elem = $('#'+hash);
    if (elem.length) {
      scroller().scrollTop(elem.offset().top);
      // Guard against scrolling again w/ reactive changes
      Template.myTemplate.scrolled = true;
    }
   }, 
  0);
  }
};

Template.myTemplate.destroyed = function() {
  delete Template.myTemplate.scrolled;
};

0 commentaires

1
votes

Actuellement, il y a un problème dans ironRouter où le hachage est retiré de l'URL. Ceci est discuté ici et ici . Heureusement Il y a une solution même s'il ne semble pas être dans l'écurie Version.

Ma solution de routeur de fer avec des balises d'ancrage traditionnelles: p>

1) Appliquez le correctif du percon -router ci-dessus p>

2) P>

function anchorScroll () {
    Deps.autorun(function (){
        var hash =  Session.get('hash');
        if (hash) {
            var offset = $('a[name="'+hash+'"]').offset();
            if (offset){
                $('html, body').animate({scrollTop: offset.top},400);
            }
        }
        Session.set('hash', '');
    });
}

Template.MYTEMPLATE.rendered = function (){
    anchorScroll();
};

0 commentaires

0
votes

La réponse de Mike n'a pas vraiment fonctionné pour moi. Le hachage retournait vide dans le rappel onRendé. J'ai nié le code dans un météore.settimeout

fyi que j'utilise blaze. P>

ci-dessous travaillé comme un charme :) p>

Template.myTemplate.onRendered(function() {
  Meteor.setTimeout(function(){ 
  var hash = document.location.hash.substr(1);
  if (hash && !Template.myTemplate.scrolled) {
  var scroller = function() {
    return $("html, body").stop();
  };

  Meteor.setTimeout(function() {
    var elem = $("a[name='" + hash + "']");
    if (elem.length) {
      scroller().scrollTop(elem.offset().top);
      // Guard against scrolling again w/ reactive changes
      Template.myTemplate.scrolled = true;
    }
   }, 
  0);
  }
  },0);
});

Template.myTemplate.destroyed = function() {
  delete Template.myTemplate.scrolled;
};

0 commentaires