Zoom to location on link click by maptastik

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Zoom to location on link click</title>

    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <script src="//cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>


  <style id="jsbin-css">
#map { height: 180px; }
</style>
</head>
  <body>
    <div id='map'></div>

    <div class='map-navigation'>
      <div>
        <h1>Government Buildings</h1>
        <p><a href='' data-zoom='18' data-position='38.210133, -84.559359'>County Courthouse</a></p>
        <p><a href='' data-zoom='18' data-position='38.209501, -84.557031'>GSCPC</a></p>
      </div>
      <div>
        <h1>Schools</h1>
        <p><a href='' data-zoom='18' data-position='38.205853, -84.559008'>Garth</a></p>
        <p><a href='' data-zoom='18' data-position='38.207860, -84.554646'>Georgetown College</a></p>
        </p>
      </div>
    </div>
  <script id="jsbin-javascript">
var map = L.map('map', {
            maxZoom: 21,
            minZoom: 16
        });
        map.setView([38.209985, -84.559826], 16);

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

document.querySelector('.map-navigation').onclick = function(abc) {
    var pos = abc.target.getAttribute('data-position');
    var zoom = abc.target.getAttribute('data-zoom');
    if (pos && zoom) {
        var locat = pos.split(',');
        var zoo = parseInt(zoom);
    map.setView(locat, zoo, {animation: true});
    return false;
    }
};
</script>


<script id="jsbin-source-css" type="text/css">#map { height: 180px; }</script>

<script id="jsbin-source-javascript" type="text/javascript"> var map = L.map('map', {
            maxZoom: 21,
            minZoom: 16
        });
        map.setView([38.209985, -84.559826], 16);

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

document.querySelector('.map-navigation').onclick = function(abc) {
    var pos = abc.target.getAttribute('data-position');
    var zoom = abc.target.getAttribute('data-zoom');
    if (pos && zoom) {
        var locat = pos.split(',');
        var zoo = parseInt(zoom);
    map.setView(locat, zoo, {animation: true});
    return false;
    }
};</script></body>
</html>

jsbin.fupaho.css

#map { height: 180px; }

jsbin.fupaho.js

var map = L.map('map', {
            maxZoom: 21,
            minZoom: 16
        });
        map.setView([38.209985, -84.559826], 16);

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

document.querySelector('.map-navigation').onclick = function(abc) {
    var pos = abc.target.getAttribute('data-position');
    var zoom = abc.target.getAttribute('data-zoom');
    if (pos && zoom) {
        var locat = pos.split(',');
        var zoo = parseInt(zoom);
    map.setView(locat, zoo, {animation: true});
    return false;
    }
};