JSFiddle - React, Tailwind, and code Playground

HTML

<aside>
    <hgroup>
        <br /><br /><br /><br /><br />
        <h1>jquery.scrollIntoView.js</h1>
        <h2><a href="https://github.com/Arwid/jQuery.scrollIntoView">@github/arwid</a></h2>
    </hgroup>
    <nav>
      <input id="anim" type="checkbox" checked>animate</input>
        <br />
      <ul>
        <li><a href="#A">Show Aaaa</a></li>
        <li><a href="#B">Show B</a></li>
        <li><a href="#C">Show C</a></li>
        <li><a href="#D">Show D</a></li>
        <li><a href="#E">Show E</a></li>
        <li><a href="#F">Show F</a></li>
        <li><a href="#B,#C">Show B&C</a></li>
        <li><a href="#C,#D">Show C&D</a></li>
        <li><a href="#D,#E">Show D&E</a></li>
        <li><a href="#B,#C,#D">Show B&C&D</a></li>
        <li><a href="#C,#D,#E">Show C&D&E</a></li>
      </ul>
    </nav>
  </aside>
  
  <section>
    <div id="A">A</div><div id="B">B</div><div id="C">C</div><div id="D">D</div><div id="E">E</div><div id="F">F</div>
  </section>

CSS

/* mini reset */
      html,body,div,span,article,aside,header,hgroup,menu,nav,ul,section,h1,h2 { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent }
      body { line-height:1 }
      article,aside,footer,header,hgroup,menu,nav,section { display:block }
      nav>ul { list-style:none }

      /* page specific */
      h2 { font-size: 90% }
      aside { position: fixed; width: 190px; margin: 10px;}
      aside>nav,nav>ul { margin-top: 10px; }
      section { position: absolute; left: 190px; right:0; height:356px; overflow-x:scroll; white-space: nowrap; }
      section>div { height:356px; width: 100px; display: inline-block; background: #eee; border: 1px solid #999 }

JavaScript

/*!
 * $.fn.scrollIntoView - similar to the default browser scrollIntoView
 * The default browser behavior always places the element at the top or bottom of its container. 
 * This override is smart enough to not scroll if the element is already visible.
 *
 * Copyright 2011 Arwid Bancewicz
 * Licensed under the MIT license
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * @date 8 Jan 2013
 * @author Arwid Bancewicz http://arwid.ca
 * @version 0.3
 */
(function(a){a.fn.scrollIntoView=function(f,j,c){var b=a.extend({},a.fn.scrollIntoView.defaults);if(a.type(f)=="object"){a.extend(b,f)}else{if(a.type(f)=="number"){a.extend(b,{duration:f,easing:j,complete:c})}else{if(f==false){b.smooth=false}}}var h=Infinity,e=0;if(this.size()==1){((h=this.get(0).offsetTop)==null||(e=h+this.get(0).offsetHeight))}else{this.each(function(m,n){(n.offsetTop<h?h=n.offsetTop:n.offsetTop+n.offsetHeight>e?e=n.offsetTop+n.offsetHeight:null)})}e-=h;var k=this.commonAncestor().get(0);var g=a(window).height();while(k){var d=k.scrollTop,l=k.clientHeight;if(l>g){l=g}if(l==0&&k.tagName=="BODY"){l=g}if((k.scrollTop!=((k.scrollTop+=1)==null||k.scrollTop)&&(k.scrollTop-=1)!=null)||(k.scrollTop!=((k.scrollTop-=1)==null||k.scrollTop)&&(k.scrollTop+=1)!=null)){if(h<=d){i(k,h)}else{if((h+e)>(d+l)){i(k,h+e-l)}else{i(k,undefined)}}return}k=k.parentNode}function i(n,m){if(m===undefined){if(a.isFunction(b.complete)){b.complete.call(n)}}else{if(b.smooth){a(n).stop().animate({scrollTop:m},b)}else{n.scrollTop=m;if(a.isFunction(b.complete)){b.complete.call(n)}}}}return this};a.fn.scrollIntoView.defaults={smooth:true,duration:null,easing:a.easing&&a.easing.easeOutExpo?"easeOutExpo":null,complete:a.noop(),step:null,specialEasing:{}};a.fn.isOutOfView=function(b){var c=true;this.each(function(){var h=this.parentNode,d=h.scrollTop,g=h.clientHeight,f=this.offsetTop,e=this.offsetHeight;if(b?(f)>(d+g):(f+e)>(d+g)){}else{if(b?(f+e)<d:f<d){}else{c=false}}});return c};a.fn.commonAncestor=function(){var c=[];var...