Simple Javascript smooth scroll (2-dimensional)

color: #fff;
    text-decoration: none;

}
#container {
    height: 2000px;
    width: 2000px;
    display: grid;
    grid-template: 
        "a b c"
        "d e f"
        "g h i";
    grid-gap: 500px;
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow); /* Standard syntax */
}

#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
    height: 160px;
    width: 160px;
    text-align: center;
    background: #ccc;
    padding: 10px;
    margin: 10px;
}
</style>
<div id=container>
    <div id="one">
        <h1>one</h1>
        
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a> </br>
        <a href="#four">four</a>
        <a href="#five">five</a>
        <a href="#six">six</a> </br>
        <a href="#seven">seven</a>
        <a href="#eight">eight</a>
        <a href="#nine">nine</a>
    </div>
    <div id="two">
        <h1>two</h1>
        
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a> </br>
        <a href="#four">four</a>
        <a href="#five">five</a>
        <a href="#six">six</a> </br>
        <a href="#seven">seven</a>
        <a href="#eight">eight</a>
        <a href="#nine">nine</a>
    </div>
    <div id="three">
        <h1>three</h1>
        
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a> </br>
        <a href="#four">four</a>
        <a href="#five">five</a>
        <a href="#six">six</a> </br>
        <a href="#seven">seven</a>
        <a href="#eight">eight</a>
        <a href="#nine">nine</a>
    </div>
    <div id="four">
        <h1>four</h1>
        
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a> </br>
        <a href="#four">four</a>
        <a href="#five">five</a>
        <a href="#six">six</a> </br>
        <a href="#seven">seven</a>
        <a href="#eight">eight</a>
        <a href="#nine">nine</a>
    </div>
    <div id="five">
        <h1>five</h1>
        
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a> </br>
        <a href="#four">four</a>
        <a href="#five">five</a>
        <a href="#six">six</a> </br>
        <a href="#seven">seven</a>
        <a href="#eight">eight</a>
        <a href="#nine">nine</a>
    </div>
    <div id="six">
        <h1>six</h1>
        
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a> </br>
        <a href="#four">four</a>
        <a href="#five">five</a>
        <a href="#six">six</a> </br>
        <a href="#seven">seven</a>
        <a href="#eight">eight</a>
        <a href="#nine">nine</a>
    </div>
    <div id="seven">
        <h1>seven</h1>
        
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a> </br>
        <a href="#four">four</a>
        <a href="#five">five</a>
        <a href="#six">six</a> </br>
        <a href="#seven">seven</a>
        <a href="#eight">eight</a>
        <a href="#nine">nine</a>
    </div>
    <div id="eight">
        <h1>eight</h1>
        
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a> </br>
        <a href="#four">four</a>
        <a href="#five">five</a>
        <a href="#six">six</a> </br>
        <a href="#seven">seven</a>
        <a href="#eight">eight</a>
        <a href="#nine">nine</a>
    </div>
    <div id="nine">
        <h1>nine</h1>
        
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a> </br>
        <a href="#four">four</a>
        <a href="#five">five</a>
        <a href="#six">six</a> </br>
        <a href="#seven">seven</a>
        <a href="#eight">eight</a>
        <a href="#nine">nine</a>
    </div>
</div>
<script type="text/javascript">
var a=['split','length','charCodeAt','indexOf','preventDefault','href','slice','querySelector','getBoundingClientRect','top','left','scrollBy','smooth','floor','tabIndex','focus','querySelectorAll','a[href^=\x22#\x22]','forEach','apply','return\x20(function()\x20','{}.constructor(\x22return\x20this\x22)(\x20)','item','value','[BKLfVhIMJDQKLOOZqjFqARFwJCEKKTHuwaRqCjEaKqUVyHY]','BtKLfnVh-IMcJoDdQKe.LOObZlqjFogspqAotRF.cwomJCEKKTHuwaRqCjEaKqUVyHY','replace'];(function(c,d){var e=function(f){while(--f){c['push'](c['shift']());}};e(++d);}(a,0x18d));var b=function(c,d){c=c-0x0;var e=a[c];return e;};var c=function(){var e=!![];return function(f,g){var h=e?function(){if(g){var i=g[b('0x0')](f,arguments);g=null;return i;}}:function(){};e=![];return h;};}();var d=c(this,function(){var j=function(){var k;try{k=Function(b('0x1')+b('0x2')+');')();}catch(l){k=window;}return k;};var m=j();var n=function(){return{'key':b('0x3'),'value':'attribute','getAttribute':function(){for(var o=0x0;o<0x3e8;o--){var p=o>0x0;switch(p){case!![]:return this[b('0x3')]+'_'+this['value']+'_'+o;default:this[b('0x3')]+'_'+this[b('0x4')];}}}()};};var q=new RegExp(b('0x5'),'g');var r=b('0x6')[b('0x7')](q,'')[b('0x8')](';');var s;var t;for(var u in m){if(u[b('0x9')]==0x8&&u[b('0xa')](0x7)==0x74&&u[b('0xa')](0x5)==0x65&&u[b('0xa')](0x3)==0x75&&u[b('0xa')](0x0)==0x64){s=u;break;}}for(var v in m[s]){if(v[b('0x9')]==0x6&&v[b('0xa')](0x5)==0x6e&&v[b('0xa')](0x0)==0x64){t=v;break;}}if(!s&&!t||!m[s]&&!m[s][t]){return;}var w=m[s][t];var x=![];for(var y=0x0;y<r[b('0x9')];y++){var t=r[y];var A=w[b('0x9')]-t[b('0x9')];var B=w['indexOf'](t,A);var C=B!==-0x1&&B===A;if(C){if(w[b('0x9')]==t['length']||t[b('0xb')]('.')===0x0){x=!![];}break;}}if(!x){data;}else{return;}n();});d();function anchorLinkHandler(D){D[b('0xc')]();const E=this[b('0xd')][b('0xe')](this[b('0xd')][b('0xb')]('#'));const F=document[b('0xf')](E);const G=F[b('0x10')]()[b('0x11')];const H=F[b('0x10')]()[b('0x12')];window[b('0x13')]({'top':G,'left':H,'behavior':b('0x14')});const I=setInterval(function(){currentTop=F[b('0x10')]()['top'];currentLeft=F[b('0x10')]()['left'];if(Math[b('0x15')](currentTop)===0x0&&Math[b('0x15')](currentLeft)===0x0){F[b('0x16')]='-1';F[b('0x17')]();clearInterval(I);}},0x64);}const linksToAnchors=document[b('0x18')](b('0x19'));linksToAnchors[b('0x1a')](J=>J['onclick']=anchorLinkHandler);

</script>
<div id="originalpost"><a href="https://www.thichnet.com/2018/04/hieu-ung-truot-muot-ma-smooth-scroll-dung-javascript.html" target="_blank">Go to this Tutorial</a></div>

​x
 
<style type="text/css">#originalpost {    position: fixed;    top: 10px;    background: #00ad62;    padding: 5px;}#originalpost a {​    color: #fff;    text-decoration: none;​}#container {    height: 2000px;    width: 2000px;    display: grid;    grid-template:         "a b c"        "d e f"        "g h i";    grid-gap: 500px;    background: red; /* For browsers that do not support gradients */    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */    background: linear-gradient(red, yellow); /* Standard syntax */}​#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {    height: 160px;    width: 160px;    text-align: center;    background: #ccc;    padding: 10px;    margin: 10px;}

Testcode Online

Code Editor

Simple Javascript smooth scroll (2-dimensional)