原生js代码实现返回顶部代码

分类:编程时间:2024-07-30 20:30:38 浏览:1635 评论:0 小中大全屏

可以写成chrome插件在所有网站插入

js代码:

/*返回顶部 和返回底部*/
window.onload=function(){
	/*添加返回顶部按钮*/
	var a=document.createElement("a"); 
	a.setAttribute("href","JavaScript:window.scrollTo(0,0);"); 
	a.setAttribute("id","All_url_totop")
	a.setAttribute("class","All_url_totop");
	document.body.appendChild(a);
	/*添加返回底部的按钮*/
	var a=document.createElement("a");
	a.setAttribute("href","JavaScript:window.scrollTo(0,document.body.scrollHeight);"); 
	a.setAttribute("id","All_url_totop2")
	a.setAttribute("class","All_url_totop");
	document.body.appendChild(a);
}

css代码:

/*返回顶部的css*/
.All_url_totop{
position:fixed;right:10px;width: 35px;height: 35px; border-radius: 5px; position: fixed;right: 10px; cursor: pointer;background-repeat: no-repeat; background-position: 50% 50%; background-color: #000; opacity: .1; transition: opacity .2s ease-in-out;z-index: 99999;
}
#All_url_totop{
background-image:url(data:img/png;base64,R0lGODlhEgAUAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAASABQAAAImjI+py+IPo4xmWmRpyq5dFkzgoY3VY5KS9ykcKy6vnMEr3W417hQAOw==);
top:384px;
}
#All_url_totop2{
background-image:url(data:img/png;base64,R0lGODlhEgAUAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAASABQAAAIqlB2peX27nINKNsoswnrTLmABKJKcJH5PGl3siKZdabZgWN2rzuPv/yoAADs=);
top:429px;
}
#All_url_totop:hover,
#All_url_totop2:hover{
opacity: .5;
}

相关推荐

highlight的使用一句代码实现代码高亮

只要页面有<pre>标签,引入一个js即可实现代码高亮代码一(highlight): ie会出现问题懒得改了我自己用的代码二更小 18kb在页面的底部添加:<script ty

javascript原生js实现html中checkbox复选框按shift多选

纯原生JavaScript代码无需任何库整理后可以直接拿来用的代码<input type='checkbox' name='cateid[]'> &l

html 弹出对话框 DIV模拟对话框小窗口原生js代码 弹出子窗口

关键是还可以拖动查看演示代码1(最简单的拖动原理):<div id='box' style="position:absolute;width:100px;height

chartjs实现柱状图/横向柱状图/曲线图/折线图/饼状图/环形图分析图 javascript

chartjs最新版好像有些功能实现不了不知道是不会用还是什么问题所以只要用的旧版其中 Chart.js 版本为 v2.9.4 可以去网上搜索下载例子:<!doctype html>

highlight.js 代码高亮插件详细使用说明

第一步:下载首选下载 highlight.js 代码高亮插件下载地址:https://highlightjs.org/ 勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。

原生js取随机数,指定范围内的随机数

例如取5000到8000之间的随机数:a=Math.round(Math.random()*(8000-5000)+5000);<script> //获取 0～1.0 之间的随机数：结

原生js,原生javascript写的开关按钮

原生javascript生成随机字母 js取随机字符

JavaScript取随机字母:方式有很多我比较喜欢这一种其中字符列表和要取的个数改起来都比较方便<script> function 取随机字母(count){

刷新网页时,提示:您所查找的网页要使用已输入的信息。返回此页可能需要重复已进行的所有操作。是否要继续操作?

在网页中有form表单的时候,只要网页刷新,就会提示您所查找的网页要使用已输入的信息。返回此页可能需要重复已进行的所有操作。是否要继续操作?的确认重新提交表单的提示这个提示只有在你提交过后才会提示如果

电脑浏览器网页定时自动刷新，如何实现一直刷新插件

分别说一下浏览器的自动刷新和网页代码的自动刷新方法吧：第一种：浏览器设置自动刷新方法：（这里我使用的是360浏览器）点击扩展中心，在上面搜索【刷新】关键词搜索后出现几个自动刷新的插件。安装即可每个人

原生js代码实现 返回顶部代码

相关推荐

原生js代码实现返回顶部代码