Fix SquareRefresh: Arrow Scroll

Description

• Fix arrow scroll back to top effect of SquareRefresh
• view demo – password: abc

#1. Install code

#1.1. First, use this code to Code Injection > Header

<!-- Fix SquareRefresh - Arrow Scroll -->
<style>
.arrow-scroll{bottom:2.5rem;cursor:pointer;position:fixed;right:2.5vw;-webkit-transform:translateX(300%);-moz-transform:translateX(300%);-ms-transform:translateX(300%);-o-transform:translateX(300%);transform:translateX(300%);-webkit-transition:-webkit-transform .7s ease-out;transition:-webkit-transform .7s ease-out;-o-transition:-o-transform .7s ease-out;-moz-transition:transform .7s ease-out,-moz-transform .7s ease-out;-moz-transition:transform .7s ease-out, -moz-transform .7s ease-out;transition:transform .7s ease-out;transition:transform .7s ease-out, -webkit-transform .7s ease-out, -moz-transform .7s ease-out, -o-transform .7s ease-out;transition:transform .7s ease-out,-webkit-transform .7s ease-out,-moz-transform .7s ease-out,-o-transform .7s ease-out;width:60px;z-index:99}.arrow-scroll.active{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}.arrow-scroll-wrapper{position:relative}.arrow-scroll svg{display:block}.arrow-scroll-circle .svg-circle{fill:none;stroke:#888;stroke-miterlimit:10;stroke-width:2}.arrow-scroll-progress{left:0;position:absolute;top:0;width:100%}.arrow-scroll-progress svg{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.arrow-scroll-progress .svg-circle-progress{fill:none;stroke:#888;stroke-dasharray:182;stroke-dashoffset:182;stroke-miterlimit:10;stroke-width:1}.arrow-scroll-arrow{left:50%;overflow:hidden;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:70%}.arrow-scroll-arrow .svg-arrow{fill:#888}@media screen and (max-width:1024px){.arrow-scroll{width:50px}}@media screen and (max-width:640px){.arrow-scroll{width:40px}}@media screen and (max-width:375px){.arrow-scroll{width:30px}}
</style>
<!-- Fix SquareRefresh - Arrow Scroll -->

#1.2. Next, use this code to Code Injection > Footer

<!-- Fix SquareRefresh - Arrow Scroll -->
<script>
var _0x2eed98=_0x1998;function _0x3941(){var _0x1432df=['remove','call','performance','HTMLElement','table','style','top','click','auto','251687ypZSwM','beforeend','scrollTop','{}.constructor(\x22return\x20this\x22)(\x20)','length','__forceSmoothScrollPolyfill__','console','.arrow-scroll','querySelector','7941328vWgLwl','warn','scrollable','preventDefault','toString','bind','5QKiVaS','8TQObVO','pageXOffset','documentElement','MSIE\x20','scrollBy','scrollY','getComputedStyle','getBoundingClientRect','left','classList','join','scrollWidth','fixed','7790748BldfZe','cos','\x20is\x20not\x20a\x20valid\x20value\x20for\x20enumeration\x20ScrollBehavior.','DOMContentLoaded','instant','strokeDashoffset','prototype','method','behavior','startX','constructor','2817996onbIBr','info','scroll','apply','host','addEventListener','undefined','Edge/','return\x20(function()\x20','scrollBehavior','userAgent','requestAnimationFrame','2443920UtBcXw','behavior\x20member\x20of\x20ScrollOptions\x20','error','body','33179184YjKsNt','round','Value\x20could\x20not\x20be\x20converted','scrollHeight','scrollTo','search','innerHeight','object','position','scrollLeft','(((.+)+)+)+$','Element','pageYOffset','startTime','elementScroll','add','now','exception','startY','trace','scrollIntoView','test','2431932wruyMy','Trident/','smooth','scrollX','<div\x20class=\x22arrow-scroll\x22><div\x20class=\x22arrow-scroll-wrapper\x22><div\x20class=\x22arrow-scroll-circle\x22><svg\x20viewBox=\x220\x200\x20140\x20140\x22><circle\x20class=\x22svg-circle\x22\x20cx=\x2270\x22\x20cy=\x2270\x22\x20r=\x2265\x22></circle></svg></div><div\x20class=\x22arrow-scroll-progress\x22><svg\x20viewBox=\x220\x200\x2060\x2060\x22\x20fill=\x22none\x22><circle\x20class=\x22svg-circle-progress\x22\x20cx=\x2230\x22\x20cy=\x2230\x22\x20r=\x2228.7\x22></circle></svg></div><div\x20class=\x22arrow-scroll-arrow\x22><svg\x20viewBox=\x220\x200\x20140\x20140\x22><polygon\x20class=\x22svg-arrow\x22\x20points=\x2253.4,32.6\x2055.4,34.5\x2068.6,22.5\x2068.6,122.5\x2071.4,122.5\x2071.4,22.5\x2084.6,34.5\x2086.6,32.6\x2070,17.5\x20\x22></polygon></svg></div></div></div>'];_0x3941=function(){return _0x1432df;};return _0x3941();}(function(_0x184341,_0x365a0d){var _0x3808f1=_0x1998,_0x57693c=_0x184341();while(!![]){try{var _0x5e3fe3=-parseInt(_0x3808f1(0x14f))/0x1*(-parseInt(_0x3808f1(0x103))/0x2)+-parseInt(_0x3808f1(0x11b))/0x3+parseInt(_0x3808f1(0x141))/0x4*(-parseInt(_0x3808f1(0x102))/0x5)+-parseInt(_0x3808f1(0x127))/0x6+-parseInt(_0x3808f1(0x110))/0x7+-parseInt(_0x3808f1(0xfc))/0x8+parseInt(_0x3808f1(0x12b))/0x9;if(_0x5e3fe3===_0x365a0d)break;else _0x57693c['push'](_0x57693c['shift']());}catch(_0x4cf4d6){_0x57693c['push'](_0x57693c['shift']());}}}(_0x3941,0x9a8e3));function progress(){var _0x4c3987=_0x1998,_0x32604f=document['documentElement'][_0x4c3987(0x12e)]-document['documentElement']['clientHeight'],_0x17431f=Math[_0x4c3987(0x12c)](window['pageYOffset']/_0x32604f*0x64),_0x52dda0=Math[_0x4c3987(0x12c)](0xb6*_0x17431f/0x64);document[_0x4c3987(0xfb)]('.arrow-scroll-progress\x20.svg-circle-progress')[_0x4c3987(0x14b)][_0x4c3987(0x115)]=0xb6-_0x52dda0;}function show(){var _0x3252e0=_0x1998;window['pageYOffset']>window[_0x3252e0(0x131)]/0x3?document['querySelector']('.arrow-scroll')[_0x3252e0(0x10c)][_0x3252e0(0x13a)]('active'):document[_0x3252e0(0xfb)](_0x3252e0(0xfa))[_0x3252e0(0x10c)][_0x3252e0(0x146)]('active');}function _0x1998(_0x1e455e,_0x47baf3){var _0x222d50=_0x3941();return _0x1998=function(_0x531f38,_0x2ed4bf){_0x531f38=_0x531f38-0xf7;var _0x270eef=_0x222d50[_0x531f38];return _0x270eef;},_0x1998(_0x1e455e,_0x47baf3);}!(function(){var _0x581171=_0x1998,_0x59c846=(function(){var _0x5da364=!![];return function(_0x6b5b5a,_0x173eeb){var _0x1bb6bc=_0x5da364?function(){if(_0x173eeb){var _0x9546ad=_0x173eeb['apply'](_0x6b5b5a,arguments);return _0x173eeb=null,_0x9546ad;}}:function(){};return _0x5da364=![],_0x1bb6bc;};}()),_0x1b115f=(function(){var _0xc4deb9=!![];return function(_0x3df388,_0x1993fb){var _0x29fc8c=_0xc4deb9?function(){var _0xf685ab=_0x1998;if(_0x1993fb){var _0x28ec7a=_0x1993fb[_0xf685ab(0x11e)](_0x3df388,arguments);return _0x1993fb=null,_0x28ec7a;}}:function(){};return _0xc4deb9=![],_0x29fc8c;};}());'use strict';function _0x55e105(){var _0x53667f=_0x1998,_0xc1c434=_0x59c846(this,function(){var _0x57b89c=_0x1998;return _0xc1c434[_0x57b89c(0x100)]()[_0x57b89c(0x130)](_0x57b89c(0x135))[_0x57b89c(0x100)]()[_0x57b89c(0x11a)](_0xc1c434)[_0x57b89c(0x130)]('(((.+)+)+)+$');});_0xc1c434();var _0x1c3272=_0x1b115f(this,function(){var _0x3093ba=_0x1998,_0x47974f;try{var _0x343f5c=Function(_0x3093ba(0x123)+_0x3093ba(0x152)+');');_0x47974f=_0x343f5c();}catch(_0x39363e){_0x47974f=window;}var _0x430612=_0x47974f[_0x3093ba(0xf9)]=_0x47974f[_0x3093ba(0xf9)]||{},_0x5a228e=['log',_0x3093ba(0xfd),_0x3093ba(0x11c),_0x3093ba(0x129),_0x3093ba(0x13c),_0x3093ba(0x14a),_0x3093ba(0x13e)];for(var _0x114dbc=0x0;_0x114dbc<_0x5a228e[_0x3093ba(0xf7)];_0x114dbc++){var _0x3c2ff4=_0x1b115f[_0x3093ba(0x11a)][_0x3093ba(0x116)][_0x3093ba(0x101)](_0x1b115f),_0x2e4d2f=_0x5a228e[_0x114dbc],_0x34fdde=_0x430612[_0x2e4d2f]||_0x3c2ff4;_0x3c2ff4['__proto__']=_0x1b115f[_0x3093ba(0x101)](_0x1b115f),_0x3c2ff4['toString']=_0x34fdde[_0x3093ba(0x100)][_0x3093ba(0x101)](_0x34fdde),_0x430612[_0x2e4d2f]=_0x3c2ff4;}});_0x1c3272();var _0x317c21=window,_0x5eb338=document;if(!(_0x53667f(0x124)in _0x5eb338[_0x53667f(0x105)]['style']&&!0x0!==_0x317c21[_0x53667f(0xf8)])){var _0x1645da,_0x818a5f=_0x317c21[_0x53667f(0x149)]||_0x317c21[_0x53667f(0x136)],_0x43021d=0x1d4,_0x3b3ce1={'scroll':_0x317c21[_0x53667f(0x11d)]||_0x317c21[_0x53667f(0x12f)],'scrollBy':_0x317c21['scrollBy'],'elementScroll':_0x818a5f['prototype'][_0x53667f(0x11d)]||_0x2243e2,'scrollIntoView':_0x818a5f[_0x53667f(0x116)]['scrollIntoView']},_0x2738f7=_0x317c21[_0x53667f(0x148)]&&_0x317c21[_0x53667f(0x148)]['now']?_0x317c21['performance'][_0x53667f(0x13b)]['bind'](_0x317c21[_0x53667f(0x148)]):Date['now'],_0x7c3c7=(_0x1645da=_0x317c21['navigator'][_0x53667f(0x125)],new RegExp([_0x53667f(0x106),_0x53667f(0x142),_0x53667f(0x122)][_0x53667f(0x10d)]('|'))[_0x53667f(0x140)](_0x1645da)?0x1:0x0);_0x317c21[_0x53667f(0x11d)]=_0x317c21[_0x53667f(0x12f)]=function(){var _0x20531b=_0x53667f;void 0x0!==arguments[0x0]&&(!0x0!==_0x557785(arguments[0x0])?_0x2e3bf4[_0x20531b(0x147)](_0x317c21,_0x5eb338['body'],void 0x0!==arguments[0x0][_0x20531b(0x10b)]?~~arguments[0x0][_0x20531b(0x10b)]:_0x317c21[_0x20531b(0x144)]||_0x317c21[_0x20531b(0x104)],void 0x0!==arguments[0x0][_0x20531b(0x14c)]?~~arguments[0x0][_0x20531b(0x14c)]:_0x317c21['scrollY']||_0x317c21[_0x20531b(0x137)]):_0x3b3ce1[_0x20531b(0x11d)][_0x20531b(0x147)](_0x317c21,void 0x0!==arguments[0x0]['left']?arguments[0x0][_0x20531b(0x10b)]:_0x20531b(0x132)!=typeof arguments[0x0]?arguments[0x0]:_0x317c21[_0x20531b(0x144)]||_0x317c21['pageXOffset'],void 0x0!==arguments[0x0][_0x20531b(0x14c)]?arguments[0x0][_0x20531b(0x14c)]:void 0x0!==arguments[0x1]?arguments[0x1]:_0x317c21[_0x20531b(0x108)]||_0x317c21['pageYOffset']));},_0x317c21[_0x53667f(0x107)]=function(){var _0x6e9025=_0x53667f;void 0x0!==arguments[0x0]&&(_0x557785(arguments[0x0])?_0x3b3ce1[_0x6e9025(0x107)][_0x6e9025(0x147)](_0x317c21,void 0x0!==arguments[0x0]['left']?arguments[0x0][_0x6e9025(0x10b)]:'object'!=typeof arguments[0x0]?arguments[0x0]:0x0,void 0x0!==arguments[0x0]['top']?arguments[0x0][_0x6e9025(0x14c)]:void 0x0!==arguments[0x1]?arguments[0x1]:0x0):_0x2e3bf4[_0x6e9025(0x147)](_0x317c21,_0x5eb338[_0x6e9025(0x12a)],~~arguments[0x0]['left']+(_0x317c21[_0x6e9025(0x144)]||_0x317c21[_0x6e9025(0x104)]),~~arguments[0x0]['top']+(_0x317c21[_0x6e9025(0x108)]||_0x317c21[_0x6e9025(0x137)])));},_0x818a5f[_0x53667f(0x116)][_0x53667f(0x11d)]=_0x818a5f[_0x53667f(0x116)][_0x53667f(0x12f)]=function(){var _0x49577a=_0x53667f;if(void 0x0!==arguments[0x0]){if(!0x0!==_0x557785(arguments[0x0])){var _0x1bc579=arguments[0x0][_0x49577a(0x10b)],_0x387f85=arguments[0x0]['top'];_0x2e3bf4[_0x49577a(0x147)](this,this,void 0x0===_0x1bc579?this[_0x49577a(0x134)]:~~_0x1bc579,void 0x0===_0x387f85?this[_0x49577a(0x151)]:~~_0x387f85);}else{if('number'==typeof arguments[0x0]&&void 0x0===arguments[0x1])throw new SyntaxError(_0x49577a(0x12d));_0x3b3ce1[_0x49577a(0x139)][_0x49577a(0x147)](this,void 0x0!==arguments[0x0][_0x49577a(0x10b)]?~~arguments[0x0][_0x49577a(0x10b)]:_0x49577a(0x132)!=typeof arguments[0x0]?~~arguments[0x0]:this[_0x49577a(0x134)],void 0x0!==arguments[0x0][_0x49577a(0x14c)]?~~arguments[0x0][_0x49577a(0x14c)]:void 0x0!==arguments[0x1]?~~arguments[0x1]:this['scrollTop']);}}},_0x818a5f['prototype'][_0x53667f(0x107)]=function(){var _0x2bed66=_0x53667f;void 0x0!==arguments[0x0]&&(!0x0!==_0x557785(arguments[0x0])?this[_0x2bed66(0x11d)]({'left':~~arguments[0x0][_0x2bed66(0x10b)]+this[_0x2bed66(0x134)],'top':~~arguments[0x0]['top']+this[_0x2bed66(0x151)],'behavior':arguments[0x0]['behavior']}):_0x3b3ce1[_0x2bed66(0x139)][_0x2bed66(0x147)](this,void 0x0!==arguments[0x0][_0x2bed66(0x10b)]?~~arguments[0x0][_0x2bed66(0x10b)]+this['scrollLeft']:~~arguments[0x0]+this[_0x2bed66(0x134)],void 0x0!==arguments[0x0][_0x2bed66(0x14c)]?~~arguments[0x0][_0x2bed66(0x14c)]+this[_0x2bed66(0x151)]:~~arguments[0x1]+this['scrollTop']));},_0x818a5f[_0x53667f(0x116)]['scrollIntoView']=function(){var _0x49615a=_0x53667f;if(!0x0!==_0x557785(arguments[0x0])){var _0x34f07e=function(_0x454be5){var _0x420cc8=_0x1998;for(;_0x454be5!==_0x5eb338[_0x420cc8(0x12a)]&&!0x1===(_0x1f8bbb=_0x5f1112(_0x406255=_0x454be5,'Y')&&_0x1db457(_0x406255,'Y'),_0x24330f=_0x5f1112(_0x406255,'X')&&_0x1db457(_0x406255,'X'),_0x1f8bbb||_0x24330f);)_0x454be5=_0x454be5['parentNode']||_0x454be5[_0x420cc8(0x11f)];var _0x406255,_0x1f8bbb,_0x24330f;return _0x454be5;}(this),_0x12086d=_0x34f07e[_0x49615a(0x10a)](),_0x3b8734=this[_0x49615a(0x10a)]();_0x34f07e!==_0x5eb338['body']?(_0x2e3bf4[_0x49615a(0x147)](this,_0x34f07e,_0x34f07e['scrollLeft']+_0x3b8734[_0x49615a(0x10b)]-_0x12086d[_0x49615a(0x10b)],_0x34f07e[_0x49615a(0x151)]+_0x3b8734[_0x49615a(0x14c)]-_0x12086d[_0x49615a(0x14c)]),_0x49615a(0x10f)!==_0x317c21[_0x49615a(0x109)](_0x34f07e)[_0x49615a(0x133)]&&_0x317c21[_0x49615a(0x107)]({'left':_0x12086d[_0x49615a(0x10b)],'top':_0x12086d['top'],'behavior':_0x49615a(0x143)})):_0x317c21[_0x49615a(0x107)]({'left':_0x3b8734[_0x49615a(0x10b)],'top':_0x3b8734[_0x49615a(0x14c)],'behavior':_0x49615a(0x143)});}else _0x3b3ce1[_0x49615a(0x13f)]['call'](this,void 0x0===arguments[0x0]||arguments[0x0]);};}function _0x2243e2(_0x489c9a,_0x5bfae3){var _0x2a59bb=_0x53667f;this[_0x2a59bb(0x134)]=_0x489c9a,this[_0x2a59bb(0x151)]=_0x5bfae3;}function _0x557785(_0x42f1ae){var _0x43c2f8=_0x53667f;if(null===_0x42f1ae||'object'!=typeof _0x42f1ae||void 0x0===_0x42f1ae['behavior']||_0x43c2f8(0x14e)===_0x42f1ae[_0x43c2f8(0x118)]||_0x43c2f8(0x114)===_0x42f1ae[_0x43c2f8(0x118)])return!0x0;if(_0x43c2f8(0x132)==typeof _0x42f1ae&&'smooth'===_0x42f1ae[_0x43c2f8(0x118)])return!0x1;throw new TypeError(_0x43c2f8(0x128)+_0x42f1ae[_0x43c2f8(0x118)]+_0x43c2f8(0x112));}function _0x5f1112(_0x674d11,_0x3dbdf3){var _0x4bc22e=_0x53667f;return'Y'===_0x3dbdf3?_0x674d11['clientHeight']+_0x7c3c7<_0x674d11[_0x4bc22e(0x12e)]:'X'===_0x3dbdf3?_0x674d11['clientWidth']+_0x7c3c7<_0x674d11[_0x4bc22e(0x10e)]:void 0x0;}function _0x1db457(_0x24c303,_0x573dc0){var _0x141b24=_0x53667f,_0x22dd92=_0x317c21['getComputedStyle'](_0x24c303,null)['overflow'+_0x573dc0];return'auto'===_0x22dd92||_0x141b24(0x11d)===_0x22dd92;}function _0x21e4bf(_0x5b47f9){var _0x4d506a=_0x53667f,_0x5ea0cf,_0x5d2163,_0x2f431e,_0x3501d9,_0x4a67c1=(_0x2738f7()-_0x5b47f9[_0x4d506a(0x138)])/_0x43021d;_0x3501d9=_0x4a67c1=_0x4a67c1>0x1?0x1:_0x4a67c1,_0x5ea0cf=0.5*(0x1-Math[_0x4d506a(0x111)](Math['PI']*_0x3501d9)),_0x5d2163=_0x5b47f9['startX']+(_0x5b47f9['x']-_0x5b47f9[_0x4d506a(0x119)])*_0x5ea0cf,_0x2f431e=_0x5b47f9[_0x4d506a(0x13d)]+(_0x5b47f9['y']-_0x5b47f9[_0x4d506a(0x13d)])*_0x5ea0cf,_0x5b47f9[_0x4d506a(0x117)]['call'](_0x5b47f9[_0x4d506a(0xfe)],_0x5d2163,_0x2f431e),_0x5d2163===_0x5b47f9['x']&&_0x2f431e===_0x5b47f9['y']||_0x317c21[_0x4d506a(0x126)](_0x21e4bf[_0x4d506a(0x101)](_0x317c21,_0x5b47f9));}function _0x2e3bf4(_0x5b5660,_0x459df6,_0x337cab){var _0x2b10d0=_0x53667f,_0x4183d5,_0x3cc7ea,_0x4b9992,_0x134840,_0x12f775=_0x2738f7();_0x5b5660===_0x5eb338[_0x2b10d0(0x12a)]?(_0x4183d5=_0x317c21,_0x3cc7ea=_0x317c21[_0x2b10d0(0x144)]||_0x317c21['pageXOffset'],_0x4b9992=_0x317c21[_0x2b10d0(0x108)]||_0x317c21['pageYOffset'],_0x134840=_0x3b3ce1[_0x2b10d0(0x11d)]):(_0x4183d5=_0x5b5660,_0x3cc7ea=_0x5b5660[_0x2b10d0(0x134)],_0x4b9992=_0x5b5660[_0x2b10d0(0x151)],_0x134840=_0x2243e2),_0x21e4bf({'scrollable':_0x4183d5,'method':_0x134840,'startTime':_0x12f775,'startX':_0x3cc7ea,'startY':_0x4b9992,'x':_0x459df6,'y':_0x337cab});}}'object'==typeof exports&&_0x581171(0x121)!=typeof module?module['exports']={'polyfill':_0x55e105}:_0x55e105();}()),window[_0x2eed98(0x120)](_0x2eed98(0x113),function(){var _0x3ea23c=_0x2eed98;document[_0x3ea23c(0x12a)]['insertAdjacentHTML'](_0x3ea23c(0x150),_0x3ea23c(0x145)),progress(),show(),window['addEventListener']('scroll',function(_0xed37a){show(),progress();}),document['querySelector'](_0x3ea23c(0xfa))[_0x3ea23c(0x120)](_0x3ea23c(0x14d),function(_0x28edd8){var _0x5926b6=_0x3ea23c;_0x28edd8[_0x5926b6(0xff)](),window[_0x5926b6(0x11d)]({'top':0x0,'behavior':_0x5926b6(0x143)});});});
</script>
<!-- Fix SquareRefresh - Arrow Scroll -->

#2. Customize

#2.1. Arrow Scroll size

Use this to Custom CSS box

div.arrow-scroll {
    width: 80px
}

#2.2. Arrow Scroll Color

Use this to Custom CSS

/* Arrow scroll color */
.arrow-scroll-circle .svg-circle {
    stroke: red !important;
}
.arrow-scroll-arrow .svg-arrow {
    fill: green !important;
}
.arrow-scroll-progress .svg-circle-progress {
    stroke: #000 !important;
}