Meteor JSを使用してページ内の位置へのディープリンク

Question

私は複数のページを持つ流星アプリを持っています。私は、ページの途中でアンカーにディープリンクできるようにしたい。

伝統的に、通常のhtmlでは、ページのどこかに/mypage.html#chapter5経由でリンクします。

これを行うと、私の流星アプリはその場所にスクロールしません。

これを回避する最適な方法は何ですか？

Answer 1

javascriptルーターを使用していますか？流星のルータ？

JavaScriptベースのスクロール方法のようなものを使用できます。その一例は、jQueryを使っている：（あなたがボタンがハンドラをクリックします/あなたのリンクでこれを置くことができます）

Template.hello.events({ 
    'click #theitemtoclick':function(e,tmpl) { 
     e.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: $("#item_id").offset().top 
     }, 600); 
    } 
}); 

次にあなたがIDを使用してアンカーを置くあなたのhtmlの項目タグ：

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

Answer 2

を@ Akshatの答えは同じページではうまくいきますが、その中に "＃"付きのURLを渡すことができるようにしたいのですが？私はどのように流星の文書がそれをしました。

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

盗まsource to the meteor docs.

Answer 3

から現在、ハッシュがURLから削除されIronRouterでの問題があります。これについては、hereとhereについて説明します。幸いにもthere is a fixは安定版には見えませんが、伝統的なアンカータグと

マイアイアンルータソリューション：

1）

2の上方IronRouterの修正プログラムを適用）

Router.configure({ 
    ... 
    after: function() { 
     Session.set('hash', this.params.hash); 
    }, 
    ... 
}); 

3）

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(); 
}; 

は、残念ながら、これはする必要があります各テンプレートの.rendered()に設定します。そうでない場合、アンカータグはnですDOM内にあることが保証されています。

これはコードのプッシュで再びスクロールします。

Answer 4

Mike's Answer私にとってはあまり効果がありませんでした。 onRenderedコールバックでハッシュが空に戻りました。コードを追加で入れ子にしましたMeteor.setTimeout

fyi私はBlazeを使用しています。

は以下の魅力:)私はそうバックボーンルータを使用しています

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