Meteor JS를 사용하여 페이지의 특정 위치에 대한 딥 링크

Question

여러 페이지로 구성된 유성 앱이 있습니다. 나는 페이지의 도중에 어딘가에 앵커에게 딥 링크가되고 싶다.

전통적으로 일반 html에서는 페이지의 어딘가에서 /mypage.html#chapter5를 통해 링크를 만들 수 있습니다.

이렇게하면 유성 앱이 그 지점까지 스크롤하지 않습니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까?

Answer 1

자바 스크립트 라우터를 사용하고 계십니까? 유성 라우터?

자바 스크립트 기반의 스크롤 방법과 같은 것을 사용할 수 있습니다. 하나의 예는 JQuery와 함께 : 당신이 ID로 닻을 둘 것입니다 어디에 그런 다음 HTML 항목에 태그를

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

을 (당신은/버튼 핸들러를 클릭 링크에이를 배치 할 수 있습니다) :

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

Answer 2

@ Akshat의 답변은 같은 페이지에서 작동하지만 URL에 "#"을 포함 시키려면 어떻게해야합니까? 나는 어떻게 유성 문서가 그랬는가. source to the meteor docs.

Answer 3

에서

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

도난 현재, 해시는 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; 
};