使用Meteor JS深度链接到页面中的位置

Question

我有一个多页面的流星应用程序.我希望能够在页面中间的某个位置深度链接到锚点.

传统上,在普通的html中,您可以在页面中的某个位置创建,并通过/mypage.html#chapter5链接到它.

如果我这样做,我的流星应用程序将不会向下滚动到那个位置.

围绕这个的最佳方法是什么？

Answer 1

@Akshat的答案适用于同一页面,但是如果你希望能够传递一个带有"#"的网址呢？我做了流星文档的做法.

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

从源头偷走到流星文档.

Answer 2

你使用某种 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>