使用
在 footer
引入:
<script src="https://cdn.jsdelivr.net/gh/fz6m/Private-web@2.0.7/js/custom/lamu-leimu.min.js"></script>
注:如果你的网站 / 博客还有回到顶部的按钮,请自行找到节点删除或者 style="display:none;"
进行隐藏。
效果
作用:
- 蕾姆:点击后滚动到页面底部
- 拉姆:点击后回到页面顶部
剖析
css:
var style = '...太长已省略'var css = document.createElement('style');css.type= 'text/css';css.innerHTML = style;var head = document.head || document.getElementsByTagName('head')[0];head.appendChild(css);
div:
var lamuleimuDiv = '...太长已省略'var div = document.createElement('div');div.innerHTML = lamuleimuDiv;div.id = 'lamu-leimu';document.body.appendChild(div);document.getElementById('lamu').onclick = function() {window.scrollTo({ top: 0, behavior: "smooth" });return false;};document.getElementById('leimu').onclick = function() {window.scrollTo({ top: (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight, behavior: "smooth" });return false;};
不用多说大家都懂这两段原生 js 什么意思。
创意来自:五弹幕,本 js 脚本为其基础上的自动化。