给你的网站增加拉姆雷姆回到顶部按钮

news/2024/5/9 4:25:06/文章来源:https://sakina.blog.csdn.net/article/details/107822252

使用

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 脚本为其基础上的自动化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_724303.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react在github pages的路由匹配和vue的区别(网站子路径同理)

Vue 在 vue 部署到 github pages 时&#xff0c;我们可以借助 vue 脚手架可以读取 --mode 命令参数的特性&#xff0c;自定义一个 github 环境。 在项目根目录下建立 .env.github &#xff1a; NODE_ENV github VUE_APP_PATH /repo-name/在 package.json 添加 script &#…

给你的网站添加一个中国新年灯笼挂件(网页/博客美化)

效果 预览 实际 使用 默认 <body><!-- 在页面最后引入 --><script src"https://cdn.jsdelivr.net/gh/fz6m/china-lantern1.1/dist/china-lantern.min.js"></script></body>php <?phpdate_default_timezone_set(PRC);$year da…

利用免费的GAE(Google App Engine)建立强大的Blog(micolog)网站

看着个题目可能很玄乎&#xff0c;本来也想写的玄乎玄乎的&#xff0c;但Google了一下&#xff0c;觉得没有必要写的这么玄乎&#xff0c;其实&#xff0c;今天我就是要给大家介绍一款非常优秀的基于python(能够支持GAE)的blog程序而已&#xff0c;所以本文就言简意赅&#xff…

python关键词挖掘_seo必备工具,python采集关键词挖掘数据

采集数据来源于站长之家&#xff01; 需要输入关键词&#xff01; 引用的库 import requests from lxml import etree import re import xlwt import time例子&#xff1a; 1.etree采集列表 2.切片操作 3.保存excel格式 #站长工具关键词挖掘 # -*- codingutf-8 -*- import requ…

分享25个优秀的活动邀请网站设计案例

互联网出现以前只能用纸和笔制作简单的邀请函&#xff0c;如今婚礼、活动和会议等邀请都可以做成非常有创意的网页了。所以&#xff0c;今天本文要与大家分享的是25个优秀的活动邀请网站设计案例。 1. Herra & Viking 2. Camp Firebelly 3. Edinburg2Liverpool 4. Evening …

怎样在SharePoint 2010网站中启用匿名访问

SharePoint 2010的改动比较大&#xff0c;尤其是相对SharePoint Portal Server 2003来说。本文介绍在SharePoint 2010站点中启用匿名访问的步骤。 &#xff08;1&#xff09;你要用SharePoint 2010的“管理中心”创建一个站点&#xff0c;一般来说&#xff0c;这一步都已经创建…

weboffice 比较好的源码_源码网站和模板网站的区别

根据网站开发的方式&#xff0c;可以将网站分为源码网站和模板网站。源码网站就是指网站是全新开发的&#xff0c;全新设计&#xff0c;全新代码进行开发&#xff0c;而模板网站就相对简单&#xff0c;就是在模板的网站代码的基础上进行简单的修改和部署。对于很多客户来说&…

快站模板 连接mysql_如何轻松建站?站点一键部署搭建(详细教程)

越来越多的人选择个人建站&#xff0c;个人站长虽然门槛很低&#xff0c;但是有些朋友觉得Linux服务器各种复杂的命令脚本让自己没法搭建环境。今天就给大家推荐一款使用方便、功能强大的快速建站工具——云帮手&#xff0c;支持 Linux 与 Windows 系统&#xff0c;可一键配置搭…

防止菠菜上传PHP文件,对某菠菜网站的一次渗透测试

无意间发现一个thinkphp的菠菜站&#xff0c;最近tp不是刚好有个漏洞吗&#xff1f;然后就顺手测试了一下&#xff0c;但过程并不太顺利&#xff0c;不过最后还是拿下了&#xff0c;所以特发此文分享下思路。简单看了下&#xff0c;应该有不少人玩吧&#xff1f;正好前几天写了…

php echo表单提交_从建站打拿站 -- PHP(登录和注册)

小孩子才会喝的一塌糊涂 而我必须带着钥匙拿好手机记住回家的路。。。。---- 网易云热评在HTML基础中&#xff0c;做了两张静态页面&#xff08;登录和注册&#xff09;&#xff0c;现在我们配合PHP动态页面进行操作。一、登录页面(GET)1、action属性修改为"../php/dl.php…

网站logo服务器更换显示以前,爆料:许多老网站的站点LOGO停止显示

据买链接站长QQ爆料&#xff1a;很多老站的百度logo图片在百度搜索结果中不显示了。目前是中小网站免费的logo不在了&#xff0c;包括10几年以前排名前1.2.3名的老站。据该站长介绍说&#xff1a;我很多站长朋友老站&#xff0c;中小级别的logo都消失了&#xff0c;最近开始&am…

构建LEMP网站服务平台

Nginx 是一个很强大的高性能Web和反向代理服务器&#xff0c;它具有很多非常优越的特性&#xff1a;在高连接并发的情况下&#xff0c;Nginx是Apache服务器不错的替代品&#xff1a;Nginx在美国是做虚拟主机生意的老板们经常选择的软件平台之一。能够支持高达50,000 个并发连接…

分享一些背景虚化背景图 适合大气、高质感的网站

2019独角兽企业重金招聘Python工程师标准>>> 一组5个高品质的散焦图像&#xff0c;为您的下一个设计项目作为覆盖或背景使用起来非常顺手。或者干脆用它们作为屏幕壁纸, 压缩包一共7M之多&#xff0c;暂时先上传几张图片&#xff0c;供大家看看货……&#xff0c;格…

【兴趣】 让人欲罢不能的15个涂鸦网站!

推荐这十几个涂鸦网站&#xff0c;它们有的纯粹好玩&#xff0c;有的对学画画有帮助&#xff0c;或者两者兼有。它们未必比游戏差&#xff0c;闲暇之余还是值得一玩哒o(〃▽〃)o 注&#xff1a; 请使用电脑登录&#xff0c;手机是玩不了的 部分网站不稳定&#xff0c;可能进不…

python爬虫登录网站_python爬虫学习,使用requests库来实现模拟登录4399小游戏网站。...

1.首先分析请求&#xff0c;打开4399网站。image 右键检查元素或者F12打开开发者工具。然后找到network选项&#xff0c;image 这里最好勾选perserve log 选项&#xff0c;用来保存请求日志。这时我们来先用我们的账号密码登陆一下&#xff0c;然后查看一下截获的请求image 可以…

安卓 默认打开权限_应对网站弹窗提醒带来的骚扰问题 谷歌浏览器将开始默认拦截通知请求...

此前谷歌浏览器带来弹窗提醒功能旨在让网站可以与用户交互&#xff0c;即便在离线状态下也可以弹出某些特定提醒内容。然而和多数功能那样提醒功能也被许多网站滥用&#xff0c;不断地弹出内容更新提示来推送广告甚至直接借助提醒发广告。即便在正常情况下用户打开某个新网站地…

cache-control_网站优化(三):缓存策略优化(CDN/动静分离/Cachecontrol)

本文是连续更新系列&#xff0c;根据《任霏博客网站程序2020年度大更新》分为网络地域选择、云服务器配置优化、环境搭建优化(JVM)、缓存策略优化、SpringBoot配置优化、前端页面优化等方面分别讨论。注&#xff1a;本文只根据我的个人经验分享&#xff0c;并非专业测评&#x…

服务器快照能代替网站备份吗,云服务器快照还需要备份吗

云服务器快照还需要备份吗 内容精选换一换云硬盘备份可为云硬盘创建备份&#xff0c;利用备份数据回滚云硬盘&#xff0c;以最大限度保证用户数据正确性和安全性&#xff0c;确保您的云硬盘安全。VBS支持全量备份和增量备份。云服务器备份会在备份过程中自动创建快照并且为每个…

与Linux相关的一些网站

2019独角兽企业重金招聘Python工程师标准>>> Mono项目的C#公共语言运行环境&#xff0c;使Linux上能运行C#程序: http://www.mono-project.com/ python官网: https://www.python.org/ perl官网: http://www.perl.org/ GTK项目主页: http://www.gtk.org/ KDE官网: ht…

公司内部SQUID代理HTTPS访问资料网站

同事安装SQUID,我按如下方法加密&#xff1a; 参考URL&#xff1a; http://www.tuicool.com/articles/iYv2YfU 众所周知&#xff0c;在国内访问国外互联网经常无法访问&#xff0c;比如要找资料google上不了&#xff0c;或者去code google想下载代码上不了&#xff0c;&#xf…