Question

我的问题很简单，但我很难找到答案。我正在使用meteor来创建一个网站。使用我的流星我正在使用铁路由器来浏览我的页面AKA模板。我的头标始终保持不变。我只是通过使用铁制路由器更改主体中包含的模板来更改主体。我有一个包含带有ID的锚标签的页面，我希望当我的模板由于用户导航到该页面而发生更改时页面会自动滚动到我的网页上的某个锚点。不幸的是，我只能提供代码片段，因为我正在为公司做网页而不想泄露信息。我认为代码片段就足够了。

我在AfterRun上尝试了铁路由器：

Router.map(function(){
this.route("cpdEvents", {
    path: "cpd.html#events",
    onAfterRun: function() {
        e.preventDefault();
            $('html, body').animate({
            scrollTop: $("a[name=events]").offset().top
            }, 600);
    }
    });
});

我尝试过meteor的模板渲染功能：

if (Meteor.isClient) {
Template.cpd.rendered = function (){
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $("a[name=events]").offset().top
    }, 600);
}
}

我的网站结构的例子，显然不是一切。只是索引html和用户导航到的cpd.html。 JavaScript已在上面显示。

的index.html：

<head>
<meta ..... />
<title></title>
</head>
<body>
{{> index}}
</div>
</body>

cpd.html：

<template name="cpd">
....
<a name="events"></a>
....
</template>

只是额外的信息：

我正在使用的Meteor版本包含jquery库，我测试过我的jquery有效。

如果我没有使用meteor并使用例如HTML。这可以通过在网址末尾添加“＃”和ID来轻松完成。例如www.example.com/cpdEvents#events

Answer 1

不确定我是否理解你，但你也可以在流星中添加主题标签。只需点击你的href即可将铁路由r路由到新的主题标签。

<li><a href="{{pathFor 'posts.index'}}"><span class='glyphicon glyphicon-home'></span> Blog</a></li>
<li><a href="{{pathFor 'overview' hash='about'}}"><span class='glyphicon glyphicon-user'></span> About Me</a></li>
<li><a href="{{pathFor 'overview' hash='meetup'}}"><span class='glyphicon glyphicon-map-marker'></span>My Meetup</a></li>
<li><a href="{{pathFor 'overview' hash='contact'}}"><span class='glyphicon glyphicon-envelope'></span> Contact Me</a></li>

如果在该页面上找到，则铁路由器会自动滚动到该主题标签。通过覆盖scrollToHash函数，您可以更改滚动行为。

Router._scrollToHash = function(hash) {
  var section = $(hash);
  if (section.length) {
    var sectionTop = section.offset().top;
    $("html, body").animate({
      scrollTop: sectionTop
    }, "slow");
  }
};

浏览我的网站Click。在那里，我可以访问aboutme，meetup，通过停留在同一页面上的导航栏，只需更改主题标签。

Answer 2

你可以像这样使用jQuery滚动：

$(document).scrollTop( $("#myElement").offset().top );

其中#myElement是您要跳转到的元素的id，就像div等。

我会把它放在我的模板渲染函数中，如下所示：

Template.myTemplate.rendered = function（）{ $（document）.scrollTop（$（“＃myElement”）。offset（）。top）; }

您甚至可以获得创意，并将要跳转的元素ID作为路径中数据的一部分或通过Session变量传递。或者通过其他方式。确实有很多选择。

使用元素id，Meteor滚动到页面上的元素

2 个答案: