How to simulate legacy url fragment => element's name mapping in backbonejs

Question

I am looking a solution for How do I link to part of a page? (hash?) in my backbonejs application.

Though on static HTML pages it could be done by adding up name attribute to the html element and point it through #fragment in url, this cannot be direclty done on backbonejs. Is there a fix for this?

Answer 1

You can do it yourself with JavaScript and jQuery. In your HTML, give the element you want to jump to an ID. I use jump-to-me:

<h1 id="jump-to-me">Testing</h1>

Give the links you want to have make the jump an ID or class or something that you can use to filter by. In this case I use the class toJump:

<a href="#this-doesnt-matter" class="toJump">Jump to the H1</a>

Finally, write a little JavaScript to do the jumping. You can put this wherever in your Backbone application (such as the events hash of the parent view). In my example I'm just going to wrap it in a jQuery DOM ready wrapper.

$(function() {
    $("a.toJump").click(function(event) {
        event.preventDefault();
        $(window).scrollTop($("#jump-to-me").offset().top);
    });
});