JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/6251489/jquery.smooth-scroll.js"></script>
<div class="post">
	<div id="borders">
	<ul>
        <li><a href="#one">one</a></li>
        <li><a href="#two">two</a></li>
        <li><a href="#three">three</a></li>
        <li><a href="#four">four</a></li>
        <li><a href="#five">five</a></li>
        <li><a href="#six">six</a></li>
    </ul>
    </div>
</div>

<div id="one" class="pane">
    <h2>one</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae elit id tellus aliquam tincidunt. Mauris lectus elit, scelerisque nec maximus vel, mattis eget mauris. Sed vel porta ligula, et ultrices ligula. Vivamus dignissim diam at risus sodales, sed ultricies ligula bibendum. Pellentesque ullamcorper facilisis congue. Fusce quis dapibus purus, sed tincidunt dui. Donec condimentum iaculis nisl et egestas. Nunc viverra ultrices lacinia. Integer vulputate lacus nisl.
</div>

<div id="two" class="pane">
    <h2>two</h2>
Morbi pretium mi et enim tristique, id venenatis urna ullamcorper. Nunc quis massa nec erat vestibulum pellentesque. Nullam eu augue nec orci pellentesque pellentesque. Vestibulum id urna sed nibh aliquam scelerisque congue sed tellus. Donec venenatis, est vitae luctus varius, sapien justo efficitur risus, in vulputate diam lectus id sem. Suspendisse blandit urna eget mauris malesuada condimentum. In ac imperdiet tellus, at imperdiet nunc. Proin id augue ultrices, facilisis sem nec, suscipit lectus. Suspendisse placerat eleifend nunc, id pellentesque erat posuere id. Donec ut elementum mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse malesuada tortor libero, et iaculis mauris consequat ut. Duis ac feugiat neque. Donec turpis leo, consequat eget purus eu, rutrum laoreet nulla. Nunc ut eleifend lectus.
</div>

<div id="three" class="pane">
    <h2>three</h2>
Vivamus blandit metus libero, ac lobortis augue posuere non. Cum sociis natoque...

CSS

.pane { transition: opacity 0.4s; }
.pane--blurred { opacity: 0.5; }

JavaScript

var isBlurred = false;

$('#borders a').on('click', function(e) { 
    var el = $( e.target.getAttribute('href') );
    var elOffset = el.offset().top;
    var elHeight = el.height();
    var windowHeight = $(window).height();
    var offset;
    
    if (elHeight < windowHeight) {
        offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
    }
    else {
        offset = elOffset;
    }
    
    $.smoothScroll({
        speed: 700,
        offset: offset,
        
        // 'blur' elements after scrolling
        afterScroll: function() {
            // blur elements
            $('.pane').not(el).addClass('pane--blurred');
            
            // remember that it's blurred
            isBlurred = true;
        }
    });
    
    return false;
});

$(window).on('scroll', function() {
    // don't do anything if we're not in a blurred state
    if(!isBlurred) return;
    
    // reset everything to a non-blurry state
    $('.pane').removeClass('pane--blurred');
    isBlurred = false;
});