闷骚小贱男 发表于 2021-12-21 20:37

自动给论坛加上一键到底部的小脚本

本帖最后由 闷骚小贱男 于 2021-12-21 22:16 编辑

不知道你们有没有遇到过帖子里面有很多图片,页面高度很高的时候(scrollHeight好几万),还想要拉滚动条到页面最底部...这时候就需要一个一键到底的小按钮了。
作为一个JS小小白,要动动小脑袋瓜,几分钟写了一个小脚本。

# 编写步骤
## 做图
为了美观,那肯定是要直接做一个和论坛“返回顶部”一模一样的相反的按钮,所以我截图并旋转并转化为base64备用

## 放按钮进“返回顶部”的下面
审核元素查到“返回顶部”的id为“返回顶部”,所以用`goTopBtn.parentNode`拿到“返回顶部”按钮。
然后通过创建和“返回顶部”一样的div和a,并修改id为`goBottomBtn`插入到`goTopBtn`下面。
并修改`background`为base64代码,再编写`goBottomBtn`一键到底的代码即可。


# 效果图


# 游猴/暴力猴代码



~~~JavaScript


// ==UserScript==
// @name      52pj一键到底
// @namespace   52pj一键到达页面顶部/底部
// @match       *://www.52pojie.cn/*
// @grant       none
// @version   1.0
// @AuThor      -
// @description 2021/9/28 下午9:27:25
// @run-at      document-end

// ==/UserScript==
(function () {
if(typeof goBottomBtn !='object'){
    //设置背景图,是通过论坛的“返回顶部”截图+翻转+转base64得到代码
    var BottomBtnImg='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB10lEQVRYhe3YUauyMBgH8PWwVk3DK2FSiBhJRCBFfZQ+ZZ+jboLALqSbROrSixBskY3xXggvvHB4zzx5POfC/61zP5+NubGWlDJNU865lBJ9fwCAUmoYRut2uz2fT0opIaQGOM9zznmn08Gc836/X4+KECKEAECaplhKWZtaBGMspcR1kv/wDdzAvwDebDb/b7Ber78Frjal4Q/L+nQwKoCrym+F4zje7/eKff0d8NVq5TjOW/BwOEQIhWF4v99VbE3TptNp8dZbMMbYcZxut7vdbqWUrut+2Mx13SiKAGCxWDDGVD5RaY4ZY7PZ7HQ6xXGs67pt271er3j0eDwul0scx4SQyWSiqKrCCKHxeGwYxuFwOB6PWZb5vo8xFkKEYRhFkaZpvu9blqXYWwkYABhjnucFQRBFka7ro9HofD4XI+x53mAwUFcRQq3r9WqapmLrPM+TJAmC4PV6CSEwxu122/d90zRLHWOSJCm3jgkhRWW73a74juVyWbbWIl/5gViWNZ/PgyAoO6/vwgBg2zZjrDgy1gcjhAghb55NP4e/sPOobMw/tkmUW05VpfRyqjAN3MANXB0MAHme13kpIIQAAEwp5ZwDAMZ1VC+EyLKMUtr6qeumP4CmtPIB91SCAAAAAElFTkSuQmCC';
    //创建和“返回顶部”一样的div和a
    var d=document.createElement('div');d.id='goBottomBtn';
    var a=document.createElement('a');a.title='一键到底';a.style.background='url('+BottomBtnImg+')';
    //d中添加a
    d.appendChild(a);
    //在“返回顶部”的父中加入d
    goTopBtn.parentNode.appendChild(d);
    //设置goBottomBtn按钮被点击的:一键到底部
    document.getElementById('goBottomBtn').onclick = () => {
      window.scrollTo(0, document.body.scrollHeight);
    };
    console.warn('执行一次')
}
})();

~~~



# ****

最后也可以改改做到像论坛返回顶部那样带`setInterval(scrollMove,10)`的缓慢的向下的一个效果。
我偷个懒就直接做一键到底了。。



a2523188267 发表于 2021-12-21 22:36

ctrl+end 不行吗

闷骚小贱男 发表于 2021-12-22 16:57

列明 发表于 2021-12-22 15:34
那就自动点击下一页,一直点到最后,,,

当然可以
var s=document.getElementsByClassName('xw1');
for(var i in s){if(isNaN(i)==false){if(s.innerText.indexOf('列明')>-1){s.scrollIntoView()}}else{}}
else 下一页操作

列明 发表于 2021-12-21 20:58

配合自动下一页评论的效果岂不是?直接能滑一百多页的评论?

列明 发表于 2021-12-21 21:02

朋友,我有个朋友想要个能一键到自己的评论层的按键,能不能实现呀?我记得是可以通过链接后边的提交参数的id=******实现。

闷骚小贱男 发表于 2021-12-21 22:14

列明 发表于 2021-12-21 21:02
朋友,我有个朋友想要个能一键到自己的评论层的按键,能不能实现呀?我记得是可以通过链接后边的提交参数的 ...
https://www.52pojie.cn/home.php? ... om=space&type=reply

这页面不就是吗。。

https://www.52pojie.cn/forum.php ... 565179&pid=41091697

H什么的最喜欢了 发表于 2021-12-21 22:50

a2523188267 发表于 2021-12-21 22:36
ctrl+end 不行吗

兄弟,尬住了

闷骚小贱男 发表于 2021-12-21 22:54

a2523188267 发表于 2021-12-21 22:36
ctrl+end 不行吗
:(eew右边的ctrl坏了
要2个手才能操作

15504582159 发表于 2021-12-22 00:19

这个软件很实用啊!不用往下划拉了

涛之雨 发表于 2021-12-22 07:41

emmmm
首先快捷键很好用,
但是因为图片是懒加载,所以界面有时候会乱跳。
此外就是油猴,图片css旋转180度就可以了

Wapj_Wolf 发表于 2021-12-22 07:49

谢谢楼主分享,又学习到了。
页: [1] 2 3
查看完整版本: 自动给论坛加上一键到底部的小脚本