How to make a one page menu in Ember?

Question

I'm wondering how can I make a menu like in this website with Ember ?

The page is split in different sections and we can scroll to go to each section, a click on the menu make the page scroll to the wanted section.

I'm not sure if I should have different routes in the router for this behavior, I would guess it's not the case as when we change route the view is remove from the DOM.
Then, how should I build the anchor link to each section ?

The best solution will automatically updates route when we scroll the page but any solution to handle the link and URL recognition will be fine.

will you be happy to post your solution back here if you have found one. — brg, Apr 26 '13 at 18:11
I will be but actually I didn't find a proper solution for this... still waiting for relevant answer. — Adrien Coquio, Apr 27 '13 at 20:02
ok cheers, if I manage to get a solution, I will also post back here. — brg, Apr 29 '13 at 07:55

score 1 · Answer 1 · answered Apr 05 '13 at 15:10

Some may argue otherwise, but Ember may be a little overkill for a website landing page like you've shown. Ember is meant more for robust web apps that have multiple views and data they need to be connected with.

First off, if you look at their script, they're using jQuery to animate the body's scrollTop position to the respective div and setting window.location.hash to the hash of the menu element's href which also happens to be the ID of the <section/> the body scrolls to:

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

Secondly, they are not doing anything special to load to a specific position on page load. If you load any page on the web with a hash, the browser will look for an element with that ID and load at that position. For example, http://emberjs.com/#download.

Even if you still want to use Ember for this, you'd probably end up doing something similar with a single view loaded from the / route so I wouldn't even worry about Ember until your site becomes a full fledged web app.

Thanks for your answer @Corey! Actually, I do not want this kind of menu for a simple application. I have a full Ember application and I need this kind of menu for one page in the application. I understand how it's made on the website I gave but I need to implement this in a page of an Ember app so the anchor at the end of the URL does not help me.Am I missing something ? — Adrien Coquio, Apr 05 '13 at 17:56

score 0 · Answer 2 · edited May 23 '17 at 12:00

Try using a *: catch all pattern in the router on the page you want to handle this scenario.

so lets say that index will work as a single page that you have to be able to automatically scroll to certain elements from the url.

Also you have posts and about sub pages that you can go to from the index page via links.

then...

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

});

so if you have an element with id="elementToScrollTo" then the url /#elementToScrollTo would load the index page and scroll to that element.

See How to handle 'no route matched' in Ember.js and show 404 page? also for some other ways to solve this.

I hope this helps you.

in your index page use the handlebars {{#link-to 'about'}}About{{/link-to}} syntax to get to these routes — Connor Leech, Nov 24 '13 at 11:29

How to make a one page menu in Ember?

2 Answers2