☰

9gag - Scroll down to current position

Scroll down back where the focus was when you clicked the arrow-up icon or scrolled up

  1. // ==UserScript==
  2. // @name         9gag - Scroll down to current position
  3. // @namespace    https://github.com/Procyon-b
  4. // @version      0.3.1
  5. // @description  Scroll down back where the focus was when you clicked the arrow-up icon or scrolled up
  6. // @author       Achernar
  7. // @match        https://9gag.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. "use strict";
  13.  
  14. var pos=[0,0], allPos={}, L, btt=document.querySelector('.back-to-top')
  15.  
  16. if (!btt) return;
  17.  
  18. btt.addEventListener('click', toTop);
  19. window.addEventListener('scroll', savePos);
  20.  
  21. function toTop() {
  22.   if (window.scrollY < pos[1]) {
  23.     L.midpos=[window.scrollX, window.scrollY];
  24.     backMid.style.display='';
  25.     }
  26.   }
  27.   
  28. function savePos() {
  29.   var d=window.scrollY - pos[1];
  30.   if (d < 0) showHide(true);
  31.   if (d >= 0) {
  32.     pos[0]=window.scrollX;
  33.     pos[1]=window.scrollY;
  34.     showHide();
  35.     }
  36.   if (L.midpos && (window.scrollY >= L.midpos[1]) ) {
  37.     hideMBt();
  38.     }
  39.   }
  40.  
  41. function showHide(show=false) {
  42.   if (show == L.disp) return;
  43.   back.style.display= show?'':'none';
  44.   L.disp=show;
  45.   }
  46.  
  47. var back=document.createElement('a');
  48.  
  49. document.querySelector('header#top-nav').appendChild(back);
  50.  
  51. back.href='javascript:;';
  52. back.classList='back-to-top';
  53. back.style='transform: rotate(180deg); top: 5em; display: none;';
  54. back.title='Scroll back to position';
  55.  
  56. back.addEventListener('click', function(e){
  57.   if (pos) window.scrollTo.apply(null, pos);
  58.   showHide();
  59.   });
  60.  
  61. var backMid=back.cloneNode(false);
  62. backMid.style='transform: rotate(180deg); top: 8em; display: none;';
  63. backMid.title='Scroll back to mid-position';
  64. document.querySelector('header#top-nav').appendChild(backMid);
  65. backMid.addEventListener('click', function(e){
  66.   if (L.midpos) window.scrollTo.apply(null, L.midpos);
  67.   });
  68.  
  69. function hideMBt() {
  70.   backMid.style.display='none';
  71.   delete L.midpos;
  72.   }
  73.  
  74. var hRS=history.replaceState;
  75.  
  76. history.replaceState=function() {
  77. setTimeout(function(){console.info('%c history.replaceState() ', 'background: lightblue;', location.href, {arguments});}, 0);
  78.   setTimeout(LocPos, 0);
  79.   pos=[0,0];
  80.   L={disp:false};
  81.   return hRS.apply(history, arguments);
  82.   }
  83.  
  84. function LocPos() {
  85.   if (!allPos[location.href]) {
  86.     if ( (location.hash == '#comment') && allPos[location.href.split('#')[0]] )
  87.          allPos[location.href]=allPos[location.href.split('#')[0]];
  88.     else allPos[location.href]={pos:[0,0], disp:false};
  89.     }
  90.   L=allPos[location.href];
  91.   pos=L.pos;
  92.   
  93.   back.style.display= L.disp ? '':'none';
  94.   backMid.style.display= L.midpos?'':'none';
  95.   }
  96.  
  97. // set clones
  98. allPos['https://9gag.com/home']=allPos['https://9gag.com/']={pos:[0,0], disp:false};
  99. LocPos();
  100.  
  101. })();