直达底部的文章推荐

原本CSDN点击评论按钮，页面会滚到到下面的评论区，很方便看推荐文章；但现在点击评论按钮，评论会在侧边栏展开，所以写了个油猴脚本方便自己浏览CSDN。

效果如图：

分析：

  1. 右键侧边栏工具“检查”该元素，找到对应的html
  2. 可以看到在class="csdn-side-toolbar" 的div块中有各个侧边栏所对应的a标签
  3. 我们只需在该div块下加入自己的按钮，同时绑定点击事件（获取评论模块的高度，点击按钮滚动到指定位置）即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// ==UserScript==
// @name         CSDN直达底部
// @version      1.0
// @description  CSDN直达底部
// @author       Nan
// @match        https://blog.csdn.net/*/article/details/*
// @icon         https://g.csdnimg.cn/static/logo/favicon32.ico
// ==/UserScript==

(function () {
    'use strict';

    // Your code here...
    var a = document.createElement("a");//创建一个a标签
    a.id = "Nan01";//设置该a标签的id，方便后面获取该元素
    a.className = "option-box";//设置与其他a标签一致的class属性
    var span = document.createElement("span");//创建一个a标签
    span.textContent = "底部";//span标签展示的文字
    span.className = "show-txt";//设置与其他span标签一致的class属性
    span.style = "display:flex;opacity:100;";//设置与其他span标签一致的style

    //给a标签绑定按键点击功能
    a.onclick = function () {
        console.log('点击了按键');
        //以下注释代码是回到顶部的代码，使用setInterval是为了平滑缓慢地向上滚动
        // var height = document.documentElement.scrollTop || document.body.scrollTop;
        // var t = setInterval(() => {
        //     height -= 50;
        //     if (height > 0) {
        //         window.scrollTo(0, height);
        //     } else {
        //         window.scrollTo(0, 0);
        //         clearInterval(t);
        //     }
        // }, 10);
        
        //查看评论模块所在的div，获取该模块的高度
        var pcCommentBox = document.getElementById('pcCommentBox');
        var oTop = pcCommentBox.offsetTop;
        while (pcCommentBox.offsetParent != null) {
            var oParent = pcCommentBox.offsetParent
            oTop += oParent.offsetTop  // Add parent top position
            pcCommentBox = oParent
        }
        window.scrollTo(0, oTop);//页面滚动到指定位置
        return;
    }

    var x = document.getElementsByClassName('csdn-side-toolbar')[0];
    x.appendChild(a);//将我们的a标签插入侧边栏中

    var y = document.getElementById('Nan01');
    y.appendChild(span);//将我们的span标签插入a标签中
})();