JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css">
<div class="container">
    <h1>Some content<h2>
    <select name="mySelect" id="mySelect">
        <option value="0">Select option...</option>
        <option value="6">Go to option 6</option>
        <option value="10">Go to option 10</option>
        <option value="14">Go to option 14</option>
    </select>
    <div>
        <h3 id="test1">Test 1</h3>
        <p>&nbsp;</p>
        <h3 id="test2">Test 2</h3>
        <p>&nbsp;</p>
        <h3 id="test3">Test 3</h3>
        <p>&nbsp;</p>
        <h3 id="test4">Test 4</h3>
        <p>&nbsp;</p>
        <h3 id="test5">Test 5</h3>
        <p>&nbsp;</p>
        <h3 id="test6">Test 6</h3>
        <p>&nbsp;</p>
        <h3 id="test7">Test 7</h3>
        <p>&nbsp;</p>
        <h3 id="test8">Test 8</h3>
        <p>&nbsp;</p>
        <h3 id="test9">Test 9</h3>
        <p>&nbsp;</p>
        <h3 id="test10">Test 10</h3>
        <p>&nbsp;</p>
        <h3 id="test11">Test 11</h3>
        <p>&nbsp;</p>
        <h3 id="test12">Test 12</h3>
        <p>&nbsp;</p>
        <h3 id="test13">Test 13</h3>
        <p>&nbsp;</p>
        <h3 id="test14">Test 14</h3>
        <p>&nbsp;</p>
    </div>
</div>

CSS

.container { width:500px; height: 5000px; background-color: lightGray; padding:30px; }

JavaScript

$('#mySelect').select2();
/*
$('#mySelect option').on('click', function() {
    console.log($(this));
});*/
/*

$('#mySelect').on('change', function(e){
    var element = '#test'+$(this).select2('val');
    //var element = '#test'+e.val;
    var scroll_pos = $(element).offset().top;
        
    $('html,body').scrollTop(scroll_pos);
    console.log('scrolled');    
}).on("select2-focus", function(e) { 
    console.log('focus');
    e.preventDefault(); 
    return false; 
});

*/

function log(e) {
    console.log(e);/*
    var e=$("<li>"+e+"</li>");
    $("#events_11").append(e);*/
    //e.animate({opacity:1}, 10000, 'linear', function() { e.animate({opacity:0}, 2000, 'linear', function() {e.remove(); }); });
}
$('#mySelect')
    .on("change", function(e) { 
        var element = '#test'+$(this).select2('val');
        //var element = '#test'+e.val;
        var scroll_pos = $(element).offset().top;
            
        $('#mySelect').blur();
        $('html,body').scrollTop(scroll_pos);
        console.log('scrolled');
        log("change " + e.val); 
    })
    .on("select2-opening", function() { log("opening"); })
    .on("select2-open", function() { log("open"); })
    .on("select2-close", function () {
        log("close"); 
        setTimeout(function() {
            $('.select2-container-active').removeClass('select2-container-active');
            $(':focus').blur();
        }, 1);
    })
    .on("select2-highlight", function(e) { log ("highlighted val=");})
    .on("select2-selecting", function(e) { log ("selecting val="+ e.val);})
    .on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));})
    .on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));})
    .on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");})
    .on("select2-focus", function(e) { log ("focus");})
    .on("select2-blur", function(e) { log ("blur");});