自动给论坛加上一键到底部的小脚本
本帖最后由 闷骚小贱男 于 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)`的缓慢的向下的一个效果。
我偷个懒就直接做一键到底了。。
ctrl+end 不行吗 列明 发表于 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 下一页操作 配合自动下一页评论的效果岂不是?直接能滑一百多页的评论? 朋友,我有个朋友想要个能一键到自己的评论层的按键,能不能实现呀?我记得是可以通过链接后边的提交参数的id=******实现。 列明 发表于 2021-12-21 21:02
朋友,我有个朋友想要个能一键到自己的评论层的按键,能不能实现呀?我记得是可以通过链接后边的提交参数的 ...
https://www.52pojie.cn/home.php? ... om=space&type=reply
这页面不就是吗。。
https://www.52pojie.cn/forum.php ... 565179&pid=41091697 a2523188267 发表于 2021-12-21 22:36
ctrl+end 不行吗
兄弟,尬住了 a2523188267 发表于 2021-12-21 22:36
ctrl+end 不行吗
:(eew右边的ctrl坏了
要2个手才能操作 这个软件很实用啊!不用往下划拉了 emmmm
首先快捷键很好用,
但是因为图片是懒加载,所以界面有时候会乱跳。
此外就是油猴,图片css旋转180度就可以了 谢谢楼主分享,又学习到了。