使用元素的id在页面上滚动到该元素位置，Meteor

Question

使用元素的id在页面上滚动到该元素位置，Meteor

4

我的问题很简单，但我很难找到答案。我正在使用Meteor创建网站。使用Iron Router导航我的页面（也就是模板）。头标签始终保持不变，我只通过更改Iron Router中包含的模板来更改正文。我有一个包含id锚点的页面，当模板由于用户导航到该页面而更改时，我希望页面自动滚动到某个特定的锚点。不幸的是，我只能提供代码片段，因为我正在为一家公司做网页，并且不想泄露信息。我认为代码片段足够了。

我已经尝试过Iron Router的onAfterRun：

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

这是我网站的结构示例，显然不包括全部内容。只有主页index.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。这很容易通过在URL末尾添加“#”和id来完成。例如：www.example.com/cpdEvents#events

- MartinS

2个回答

0

您可以使用jQuery进行滚动，如下所示：

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

其中#myElement是您想要跳转到的元素的id，例如一个div或类似的元素。

我会在我的模板渲染函数中这样写：

Template.myTemplate.rendered = function() { $(document).scrollTop( $("#myElement").offset().top ); }

您甚至可以通过路由中的数据或通过Session变量将要跳转到的元素的ID传递进去。或者通过其他方式。实际上有很多选择。

- CodeChimp

谢谢您的回答。它可以工作，但不完全是我要找的。因为如果您使用常规URL www.example.com/cpd，则浏览器窗口必须位于页面顶部。而如果您使用www.example.com/cpd#events URL，则浏览器窗口必须滚动到事件锚点。所以，如果我使用您的代码，浏览器窗口将始终在事件锚点处打开。但是，您的代码仍然对我有帮助，以便暂时解决问题。我可以创建多个模板网页，并只给它们其他名称。因此，我随后拥有多个可用的渲染功能。但那是很多重复代码。 - MartinS

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chaosbohne · Accepted Answer

不确定我是否理解您的意思，但是您也可以在meteor中添加hashtag。只需通过单击href将路由器与iron-route r路由到新的hashtag。

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

如果在页面上找到了这个哈希标签，那么iron-router会自动滚动到该标签。通过覆盖scrollToHash函数，您可以更改滚动行为。

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

请查看我的网站点击。在那里，我可以通过导航栏访问关于我、见面会和联系方式，只需保持在同一页上并更改哈希标签即可。