返回网页顶部方法

一.锚链接

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>

JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式的更多相关文章

  1. JavaScript返回顶部特效

    样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...

  2. javascript返回顶部几种代码总结

    纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...

  3. 写一个JavaScript“返回顶部”功能

    在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 效果演示可以查看本页.如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条.点击这里“ ...

  4. javascript返回顶部插件+源码

    javascript插件->returnTop.js: /* ** 插件名称returnTop.js ** 调用返回头部单例参数说明 ** 调用方式:turn.init(ele,speed); ...

  5. JavaScript获取css 行间样式,内连样式和外链样式的方式

    [行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv ...

  6. Javascript返回顶部

    控制按钮下拉到达一定距离时显示,返回顶层时消失,用JS中的延时定时器来模拟滚动条效果 <script type="text/javascript"> window.on ...

  7. javascript 返回顶部

    <style> #linGoTopBtn {    POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; ...

  8. [JavaScript] 表单验证不通过不提交的JS写法

    主要是本世纪初的写法.<script> function validateForm(f) { if (f.name.value == "") { alert(" ...

  9. 【JavaScript&jQuery】返回顶部

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. vue 生产环境和测试环境的配置

    我们引用的是axios 给src目录增加 api 文件夹 里面写上index.js // 配置API接口地址 var root = process.env.API_ROOT // 引用axios va ...

  2. dump与load

    dump与load 简化了dumps与loads

  3. thinkPHP使用中踩的坑,记录一下(不停更)

    版本3.2.3 1.数据库操作中的连贯操作table(),在查询的时候可以切换表,但是在插入,更新的时候请不要使用.例如 D('user')->table('auth')->add($da ...

  4. PAT甲级——A1065 A+B and C (64bit)

    Given three integers A, B and C in [−], you are supposed to tell whether A+B>C. Input Specificati ...

  5. java普通for循环和for-each迭代循环的区别

    PO实体类User: package aA; public class User { private String name; private int many; private int id; pu ...

  6. Leetcode138. Copy List with Random Pointer复制带随机指针的链表

    给定一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点. 要求返回这个链表的深度拷贝. 方法一: class Solution { public: RandomLis ...

  7. stream的map用法

    List<String> list = new ArrayList<>();list.add("1");list.add("2");li ...

  8. ES6学习笔记之块级作用域

    ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...

  9. 前端插件--swipe.js

    swipe.js的作用: 这是一个轻量级的移动滑动组件,支持触摸移动,支持响应式页面. 效果图: 代码: <!DOCTYPE html> <html lang="en&qu ...

  10. Eular质数筛法

    小Hi:我们可以知道,任意一个正整数k,若k≥2,则k可以表示成若干个质数相乘的形式.Eratosthenes筛法中,在枚举k的每一个质因子时,我们都计算了一次k,从而造成了冗余.因此在改进算法中,只 ...