leafletjs page jumps on layer click

I have a leaflet map with group layers positioned outside of it. When I scroll past the map and click on one of the checkboxes, the page jumps to the top of the map. Why would that happen?

Here is the JavaScript:

var map = L.map('map', {
    center: [51.501617,-0.018582],
    zoom: 14
});

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    maxZoom: 18,
    id: 'jeffceriello.nd7obhnh',
    accessToken: 'pk.eyJ1IjoiamVmZmNlcmllbGxvIiwiYSI6Ikhrakxrd00ifQ.SlVngzIXeS5UPC8UGmy1OA'
}).addTo(map);

map.scrollWheelZoom.disable();

// marker
var churchill = L.icon({
    iconUrl: '/img/pin.png',
    shadowUrl: '',

    iconSize:     [43, 64], // size of the icon
    shadowSize:   [0, 0], // size of the shadow
    iconAnchor:   [21, 64], // point of the icon which will correspond to marker's location
    shadowAnchor: [0, 0],  // the same for the shadow
    popupAnchor:  [0, 0] // point from which the popup should open relative to the iconAnchor
});

L.marker([51.503754,-0.014841], {icon: churchill}).addTo(map);

var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-0.014782, 51.504711]
             },
            "properties": {
                "title": "Barclays Bank",
                markerColor: "#6D8AAA"
            }
        },{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-0.014618, 51.504648]
            },
            "properties": {
                "title": "Idea Store",
                markerColor: "#6D8AAA"
            }
        },{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-0.014532, 51.504556]
            },
            "properties": {
                "title": "James Shoe Care",
                markerColor: "#6D8AAA"
            }
        }
]};

shopping = L.geoJson(geojson, {
    style: function(feature) {
        return {color: feature.properties.markerColor};
    },
    pointToLayer: function(feature, latlng) {
        return new L.CircleMarker(latlng, {radius: 8, fillOpacity: 1, stroke: false});
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.title);
    }
});

map.addLayer(shopping);

var geojson2 = {
    "type": "FeatureCollection",
    "features": [
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [-0.014546, 51.504319]
        },
        "properties": {
            "title": "Birleys",
            "markerColor": "#6D8AAA"
        }
    }
]};

food = L.geoJson(geojson2, {
    style: function(feature) {
        return {color: feature.properties.markerColor};
    },
    pointToLayer: function(feature, latlng) {
        return new L.CircleMarker(latlng, {radius: 8, fillOpacity: 1, stroke: false});
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.title);
    }
});

//map.addLayer(food);

var overlayMaps = {
    "Shopping": shopping,
    "Food & Drink": food
};

var control = L.control.layers(overlayMaps, null, {collapsed: false});
control.addTo(map);
control._container.remove();

document.getElementById('layers').appendChild(control.onAdd(map));

And here is a JSFiddle link

from leafletjs page jumps on layer click