Making markers clickable in Mapbox

Question

I'm struggling to make the markers on this Mapbox map clickable without destroying the scrolling effect. I want to make it possible to click on one of the markers, and then be scrolled to the right section.

Does anyone know how to fix it?

Answer 1

Add this to your javascript:

 /* Bind event handler to the featurelayer that holds the markers */
placesLayer.on('click', function(e) {
    //Get the id of the clicked marker
    var id = e.layer.feature.properties.id;

    //Scroll to the element
    document.getElementById(id).scrollIntoView()
});

http://jsfiddle.net/1oxkgfkw/

NOTE: As is, the code posted in the mapbox example won't work because of of their css definition for 'article'. You have to remove right:0 as I did in the jsfiddle so the article element doesn't cover the screen and prevent clicks from registering on the markers.