Simple Javascript smooth scroll (2-dimensional)

<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; } </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>