JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式
2024-10-18 04:06:10
返回网页顶部方法
一.锚链接
simpleDemo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
*{
margin: 0;
padding: 0;
}
#father{
width: 400px;
height: 5000px;
border:1px solid #000;
}
#son{
width: 600px;
height: 5000px;
background: linear-gradient(45deg ,red,yellow,green,cyan,blue);
}
</style>
</head>
<body> <div id="top">我是可爱的顶部</div>
<div id="father">
<div id="son"></div>
</div>
<a href="#top">返回顶部</a>
</body>
</html>
<script> </script>
二.JS实现返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
*{
margin: 0;
padding: 0;
}
#father{
width: 400px;
height: 5000px;
border:1px solid #000;
}
#son{
width: 600px;
height: 5000px;
background: linear-gradient(45deg ,red,yellow,green,cyan,blue);
} </style>
<script>
window.onload = function () {
var toTop = document.getElementById('toTop');
toTop.onclick = function () {
// window要通过函数scrollTo(x,y) 设置滚动到文档中某个坐标
window.scrollTo(0,0);
console.log(window);
}
}
</script>
</head>
<body>
<div id="top">我是可爱的顶部</div>
<div id="father">
<div id="son"></div>
</div>
<a href="javascript:;" id="toTop">返回顶部</a>
<!--行内式-->
<!--<a href="javascript:window.scrollTo(0,0);" id="toTop">返回顶部</a>-->
</body>
</html>
三.行内式返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
*{
margin: 0;
padding: 0;
}
#father{
width: 400px;
height: 5000px;
border:1px solid #000;
}
#son{
width: 600px;
height: 5000px;
background: linear-gradient(45deg ,red,yellow,green,cyan,blue);
} </style>
<script>
/**
* 平常项目中不推荐使用行内式写法添加事件
*
* 由于返回顶部功能是简单唯一的，所以写到行内式反而比较方便
* */
</script>
</head>
<body>
<div id="top">我是迷人的顶部</div>
<div id="father">
<div id="son"></div>
</div>
<!--行内式-->
<a href="javascript:window.scrollTo(0,0);" id="toTop">返回顶部</a>
</body>
</html>
四.内嵌式返回顶部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
height: 2000px;
width: 100px;
background: deeppink;
}
</style>
</head>
<body>
<div class="box">我是可恶的顶部</div>
<!--方法一-->
<a onclick="fn()" href="javascript:;" id="btn">按钮</a>
<!--方法二-->
<!--<a href="javascript:;" id="btn">按钮</a>-->
</body>
</html>
<!--外联式-->
<!--<script src="animate.js"></script>-->
<script> /*下面是内嵌式*/
// 方法一
function fn() {
// window要通过函数scrollTo(x,y) 设置意思是：滚动到文档中的某个坐标。
window.scrollTo(0,0);
}
// 方法二，普通js返回顶部
// var btn = document.getElementById("btn");
// btn.onclick = fn; </script>
五.外联式返回顶部。
waiLianTest.js
/*外联式返回顶部测试*/
function fn() {
// window要通过函数scrollTo(x,y) 设置意思是：滚动到文档中的某个坐标。
window.scrollTo(0,0);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
height: 2000px;
width: 100px;
background: deeppink;
}
</style>
</head>
<body>
<div class="box">我是可恶的顶部</div>
<a onclick="fn()" href="javascript:;" id="btn">按钮</a> </body>
</html>
<!--外联式-->
<script src="waiLianTest.js"></script>
最新文章
- Mybatis环境
- RSA原理及生成步骤
- ESXI6.0启用 snmp
- PBR实现
- C#获取真实IP地址实现方法
- nginx 配置文件备份
- eclipse项目导入到android studio
- nyoj 99 单词拼接
- 菜鸟学习Hibernate——简单的一个例子
- 11、四大组件之二-Service高级（二）Native Service
- Java基础知识强化之集合框架笔记55：Map集合之HashMap集合（HashMap<Integer，String>）的案例
- 自定义Window进入和退出效果（转）
- section 模块页面切换代码
- Outlook将收到邮件的附件保存在磁盘
- Asp.net mvc 大文件上传 断点续传
- Luogu 1060 开心的金明 / NOIP 2006 （动态规划）
- F2 - Spanning Tree with One Fixed Degree - 并查集+DFS
- codeforces 1082G - Petya and Graph 最大权闭合子图 网络流
- scrapy相关：splash安装 A javascript rendering service 渲染
- 2018 codejam kickstart H轮