European Election Watch HTML

clickable-map.html

<iframe src="https://csis-ilab.github.io/europe-viz/election-watch-map/" scrolling="no"></iframe>

France: Anchor Links

<div id="france-anchors">
<ul>
	<li style="border-left:0px;"><a href="#presidential">Presidential</a></li>
	<li><a href="#legislative">Legislative</a></li>
</ul>
</div>

<script>
  (function($) {
    $('.layout-detail-page__main a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top - 100
          }, 1000);
          return false;
        }
      }
    });
})(jQuery);
</script>

<style type="text/css">
#france-anchors {
    position: relative;
    margin: 1em;
    overflow: hidden;
}
#france-anchors ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -1px;
    list-style-type:none;
    margin:0px;
    padding:0px;
}
#france-anchors li {
    flex-grow: 1;
    flex-basis: auto;
    margin: 0px;
    padding: 0px;
    text-align: center;
    border-left: 1px solid #ccc;
}
</style>