Ember.js 如何在Ember中制作一页菜单？

我想知道我怎样才能做一个菜单，像在与余烬

页面分为不同的部分，我们可以滚动到每个部分，点击菜单使页面滚动到想要的部分

我不确定我是否应该在路由器中为这种行为设置不同的路由，我猜情况并非如此，因为当我们更改路由时，视图将从DOM中删除。
那么，我应该如何构建到每个部分的锚链接

---

当我们滚动页面时，最好的解决方案会自动更新路由，但任何处理链接和URL识别的解决方案都可以。

有些人可能会提出相反的观点，但对于您所展示的网站登录页来说，Ember可能有点过火。Ember更适合于需要连接多个视图和数据的健壮web应用程序

首先，如果您需要，他们将使用jQuery将

body

的

scrollTop

位置设置为相应的div，并将

window.location.hash

设置为菜单元素

href

的

hash

的ID，该ID恰好也是

body滚动到：

$(document).on('click', '#nav a, .clients-capabilities a', function(){
    var target = $(this);
    var hash = this.hash;
    var destination = $(hash).offset().top;

    stopAnimatedScroll();

    $('#nav li').removeClass('on');
    target.parent().addClass('on');

     $('html, body').stop().animate({ 
        scrollTop: destination
    }, 400, function() { window.location.hash = hash; });
    return false;
});

其次，他们没有做任何特殊的事情来加载到页面加载的特定位置。如果在web上加载任何带有哈希的页面，浏览器将查找具有该ID的元素并在该位置加载。例如

---

即使你还想用余烬来做这个，您可能会通过从

/

路径加载的单个视图来完成类似的操作，这样，在您的站点成为一个成熟的web应用程序之前，我甚至不会担心余烬问题。

尝试在您想要处理此场景的页面上的路由器中使用

*：

捕获所有模式

所以我们假设索引将作为一个页面工作，您必须能够自动从url滚动到某些元素

此外，您还可以通过链接从索引页转到帖子和关于的子页

然后

App.Router.map(function() {
  this.route('about');
  this.route('posts');
  this.route('index',{path:'*:'});

});

因此，如果您有一个id=“elementToScrollTo”的元素，那么url/#elementToScrollTo将加载索引页并滚动到该元素

有关解决此问题的其他方法，请参见

---

我希望这对您有所帮助。

谢谢您的回答@Corey！实际上，我不希望这种菜单用于简单的应用程序。我有一个完整的余烬应用程序，我需要在应用程序的一页这种菜单。我理解它是如何在我提供的网站上制作的，但我需要在一个余烬应用程序的页面中实现它，因此URL末尾的锚对我没有帮助。我是否遗漏了什么？如果你找到了解决方案，你会很高兴将你的解决方案发布回这里吗。我会的，但实际上我没有找到合适的解决方案。。。仍然在等待相关的答案。好的，干杯，如果我设法得到一个解决方案，我也会在这里发帖。在你的索引页中，使用手柄{{{链接到'about'}}关于{/链接到}语法来访问这些路由