scroll to selected marker

by FranceImage

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.3/leaflet.js"></script>
<div id="map"></div>
<div id="overlay"></div>

CSS

html, body, #map {
    width:100%;
    height:100%;
    margin:0;
    margin-left:10%;
    padding:0;
}
#overlay {
    position:absolute;
    width:30%;
    height:100%;
    left:0;
    top:0;
    background-color:rgba(255, 255, 255, 0.8);
}
.item {
    border:1px, solid;
    padding:2px;
    margin:2px;
    background-color:rgba(100, 100, 255, 0.5);
}
.active {
    background-color:rgba(100, 100, 255, 0.9);
}

JavaScript

var markers = new Array();
var map = L.map('map', {
    center: [48,14],
    zoom: 7,
    animate: true, duration: 1
});

// quick and dirty: create a big icon
L.Icon.Big = L.Icon.Default.extend({
    options: {
    iconSize: new L.Point(30, 49),
}});


//THE ICONS
var bigIcon = new L.Icon.Big();
var smallIcon = new L.Icon.Default();


L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

map.on('click', onMapClick);

function onMarkerClick(e) {
    $('div').removeClass('active');
    $('div #' + e.target._leaflet_id).addClass('active');
     for (var mark in markers){
        	markers[mark].setIcon(smallIcon);}
    var offset =    map._getNewTopLeftPoint(e.target.getLatLng()).subtract(map._getTopLeftPoint());
map.panBy(offset);
}

function onMapClick(e) {
    var marker = new L.Marker(e.latlng);
    marker.on('click', onMarkerClick);
    map.addLayer(marker);
    marker.bindPopup("Marker");
    markers[marker._leaflet_id] = marker;
    $('#overlay').append(
    '<div class="item" id="' + marker._leaflet_id + '">Marker ' + marker._leaflet_id + ' - <a href="#" 	class="remove" id="' + marker._leaflet_id + '">remove</a></div>');

    // Remove a marker
    $('.remove').on("click", function () {
        // Remove the marker
        map.removeLayer(markers[$(this).attr('id')]);

        // Remove the link
        $(this).parent('div').remove();
    });
    
    $('.item').on("mouseover", function () {
        $('div').removeClass('active');
        $(this).addClass('active');
        for (var mark in markers){
        	markers[mark].setIcon(smallIcon);}
        markerFunction($(this).attr('id'))
        markers[$(this).attr('id')].setIcon(bigIcon);
        var mid = $(this).attr('id');
        var LatLng = markers[mid].getLatLng();
        var offset =    map._getNewTopLeftPoint(LatLng).subtract(map._getTopLeftPoint());
map.panBy(offset);
    });
}

function...