目錄

前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕～

前端小試身手(2)--it幫跳轉到最佳解答

前端小試身手(3)--增添系列文目錄

前端小試身手(4)--it幫發文「一眼全覽」

前端小試身手(5)-備份it幫的發問！

前端小試身手(6)--IMG複製大師，懶人專用小腳本

前端小試身手(7)--迷片靜音神隊友，讓你尷尬不再有！

前端小試身手(8)--教你寫出「思想審查警衛」，過濾垃圾雜訊的利器！

前端小試身手(9)--文章縮圖預覽(以codeLove論壇為例)

前情提要

使用油猴腳本(Tampermonkey)掛載

此工具的目的就是在發問頁面裡 有個黃色標籤 代表你的答案有最佳解答
但是從那邊點下去 卻不會自動跳到最佳解答
所以我們來用js快速地幫它新增這個功能吧
以後要複習自己問題的解答 就可以點那個黃色區塊 快速找到答案的寫法

程式碼的邏輯很簡單 只有兩個部分
1.捲到最佳解答
2.幫黃色區塊添增一個註記---確定使用者是click這個元素而觸動的

第一個部分寫法其實滿多的 可以直接用scrollIntoView去寫
也可以像我一樣 用window.scrollto去寫 那就必須要知道element的x,y值
所以一開始
先載入getPosition這個函式讓我們方便抓

然後設定a元素
a元素是 it幫" n 個回答"那邊(因為它位置會偏下面)
接下來就可以寫把視窗捲過去了

再來就是第二個部分 增添註記 我們用迴圈+監聽事件+localStorage
先用選擇器 把所有黃色標籤選起來 變成一個陣列 也就是HadAns[]
監聽事件讓使用者click之後
localStorage就標記一下 要跳轉視窗位置 jump->ok

接下來就回頭把第一部分跳轉視窗的條件加上去
當今天 localStorage的jump是ok的話
我們才執行跳轉卷軸的動作
跳轉完成後要把localStorage的jump改成bad 這樣就不會出現亂跳的情形

以下是所有的code 貼到tampermonkey就可以使用了

這就是今天的前端小試身手 有興趣的可以自己延伸更多功能 ~

// ==UserScript==
// @name         跳到最佳解答
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://ithelp.ithome.com.tw/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=stackoverflow.com
// @grant        none
// @require https://code.jquery.com/jquery-3.6.0.min.js

// ==/UserScript==

(function() {

window.addEventListener("load", function(event) {


function getPosition (element) {
  var x = 0;
  var y = 0;

while ( element ) {
    x += element.offsetLeft - element.scrollLeft + element.clientLeft;
    y += element.offsetTop - element.scrollLeft + element.clientTop;
    element = element.offsetParent;
  }

  return { x: x, y: y };
}




HadAns=document.querySelectorAll('.qa-condition--had-answer')

for (i=0;i<HadAns.length;i++){

HadAns[i].addEventListener('click',function(){
  localStorage.setItem("jump","ok")
})
}


if (document.referrer.search('question')>0&&localStorage.jump=="ok") {
a=document.querySelector("body > div.container.index-top > div > div > div.leftside > div.qa-status > h3")
window.scrollTo(0,getPosition(a).y)
  localStorage.setItem("jump","bad")

};


});

})();