基于JS实现回到页面顶部的五种写法(从实现到增强)【转】

写法

【1】 描点

使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置

1
2
3
4
<body style="height:2000px;">
<div id="topAnchor"></div>
<a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>

【2】 scrollTop
crollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时,scrollTop的值为0,如果元素被垂直滚动了,scrollTop的值大于0,且表示元素上方不可见内容的像素宽度
由于scrollTop是可写的,可以利用scrollTop来实现回到顶部的功能

1
2
3
4
5
6
7
8
<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
</script>
</body>

【3】scrollTo()

scrollTo(x,y)方法滚动当前window中显示的文档,让文档中由坐标x和y指定的点位于显示区域的左上角
设置scrollTo(0,0)可以实现回到顶部的效果

1
2
3
4
5
6
7
8
<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
scrollTo(0,0);
}
</script>
</body>

【4】scrollBy()

scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量
只要把当前页面的滚动长度作为参数,逆向滚动,则可以实现回到顶部的效果

1
2
3
4
5
6
7
8
9
<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
var top = document.body.scrollTop || document.documentElement.scrollTop
scrollBy(0,-top);
}
</script>
</body>

【5】scrollIntoView()
Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 

  该方法可以接受一个布尔值作为参数。如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。如果没有提供该参数,默认为true

  使用该方法的原理与使用锚点的原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果

1
2
3
4
5
6
7
8
9
<body style="height:2000px;">
<div id="target"></div>
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
target.scrollIntoView();
}
</script>
</body>

##增强##

  下面对回到顶部的功能进行增强

【1】显示增强

  使用CSS画图,将“回到顶部”变成可视化的图形(如果兼容IE8-浏览器,则用图片代替)

  使用CSS伪元素及伪类hover效果,当鼠标移动到该元素上时,显示回到顶部的文字,移出时不显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style>
.box{
position:fixed;
right:10px;
bottom: 10px;
height:30px;
width: 50px;
text-align:center;
padding-top:20px;
background-color: lightblue;
border-radius: 20%;
overflow: hidden;
}
.box:hover:before{
top:50%
}
.box:hover .box-in{
visibility: hidden;
}
.box:before{
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
content:'回到顶部';
width: 40px;
color:peru;
font-weight:bold;
}
.box-in{
visibility: visible;
display:inline-block;
height:20px;
width: 20px;
border: 3px solid black;
border-color: white transparent transparent white;
transform:rotate(45deg);
}
</style>
<body style="height:2000px;">
<div id="box" class="box">
<div class="box-in"></div>
</div>
</body>

【2】动画增强

  为回到顶部增加动画效果,滚动条以一定的速度回滚到顶部

  动画有两种:一种是CSS动画,需要有样式变化配合transition;一种是javascript动画,使用定时器来实现  

  在上面的5种实现中,scrollTop、scrollTo()和scrollBy()方法可以增加动画,且由于无样式变化,只能增加javascript动画

  定时器又有setInterval、setTimeout和requestAnimationFrame这三种可以使用,下面使用性能最好的定时器requestAnimationFrame来实现

[scode type=”yeallow[scode type=”red”]

[注意]IE9-浏览器不支持该方法,可以使用setTimeout来兼容

[/scode]

  • 增加scrollTop的动画效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>
  • 增加scrollTo()动画效果
    将scrollTo(x,y)中的y参数通过scrollTop值获取,每次减少50,直到减少到0,则动画完毕
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
scrollTo(0,oTop-50);
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>
  • 增加scrollBy()动画效果
    将scrollBy(x,y)中的y参数设置为-50,直到scrollTop为0,则回滚停止
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
scrollBy(0,-50);
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>

##实现##
由于scrollTop、scrollBy()和scrollTo()方法,都以scrollTop值是否减少为0作为动画停止的参照,且三个动画的原理和实现都基本相似,性能也相似。最终,以最常用的scrollTop属性实现动画增强效果

  当然,如果觉得50的速度不合适,可以根据实际情况进行调整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<style>
.box{
position:fixed;
right:10px;
bottom: 10px;
height:30px;
width: 50px;
text-align:center;
padding-top:20px;
background-color: lightblue;
border-radius: 20%;
overflow: hidden;
}
.box:hover:before{
top:50%
}
.box:hover .box-in{
visibility: hidden;
}
.box:before{
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
content:'回到顶部';
width: 40px;
color:peru;
font-weight:bold;
}
.box-in{
visibility: visible;
display:inline-block;
height:20px;
width: 20px;
border: 3px solid black;
border-color: white transparent transparent white;
transform:rotate(45deg);
}
</style>
<body style="height:2000px;">
<div id="box" class="box">
<div class="box-in"></div>
</div>
</body>
<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>

原文地址

原文地址:https://www.jb51.net/article/91824.htm

(更新)HTML+CSS制作一个高考倒计时

2020-07-09更新

  • 修复倒计时归零后出现负数的bug
  • 自动切换至下一年日期

起因

最近听到要开学的消息,就会想到考试,提到考试自然就会想到受本次疫情影响的高考考生。最后琢磨着做一个高考倒计时网页。为了时间长一点,我特地把日期调为了2021年的高考(别问我,我也不知道我是怎么想的)。然后呢。。。我并不会html/css(因为学业繁忙,又一直以来专注学C语言),于是就跟着B站制作新年倒计时网页的视频抄了抄代码~~ (图片都不换的那种) ~~,勉强搞出来了。
这里附上原地址:Bilibili

代码

** html代码 **

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Countdown to NCEE</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h2><span>Countdown to NCEE</span> 2021</h2>
<div class="countdown">
<div id="day">NA</div>
<div id="hour">NA</div>
<div id="minute">NA</div>
<div id="second">NA</div>
</div>
</div>

</body>
</html>
<script type="text/javascript">

function getEndTime(myYear){
var myEndTime = new Date(''+myYear+'/06/07 00:00:00');
return myEndTime;
}

function countDown(){
var mydate = new Date();
var year = '2021';
var EndTime = getEndTime(year);
var NowTime = new Date();
if( (EndTime.getTime() - NowTime.getTime() ) < 0){
year = mydate.getFullYear() + 1;
EndTime = getEndTime(year);
}
var t = EndTime.getTime() - NowTime.getTime();



var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60);

document.getElementById('day').innerText = d;
document.getElementById('hour').innerText = h;
document.getElementById('minute').innerText = m;
document.getElementById('second').innerText = s;
}
setInterval(countDown,1000)
</script>

** CSS代码 **

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}

body
{
background: #000 url(bg.jpg);
background-attachment: fixed;
background-blend-mode: hard-light;
}

.container{
position: absolute;
top: 80px;
left: 100px;
right: 100px;
bottom: 80px;
background: url(bg.jpg);
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 50px 50px rgba(0,0,0,0.5),
0 0 0 100px rgba(0,0,0,.1);
}

.container h2 {
text-align: center;
font-size: 10em;
line-height: 0.7em;
color: #333;
margin-top: -80px;
}

.container h2 span{
display: block;
font-weight: 300;
letter-spacing: 6px;
font-size: 0.2em;
}
.countdown{
display: flex;
margin-top: 50px;
}
.countdown div{
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: #333;
color: #fff;
margin: 0 15px;
font-size: 3em;
font-weight: 500;
}
.countdown div:before{
content: '';
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 35px;
background: #ff0;
color: #333;
font-size: 0.35em;
line-height: 35px;
font-weight: 300;
}
.container #day:before{
content: 'Days';
}
.container #hour:before{
content: 'Hours';
}
.container #minute:before{
content: 'Minutes';
}
.container #second:before{
content: 'Seconds';
}

Git地址

Gitee:https://gitee.com/cairbin/nceecountdown

项目演示地址:https://cairbin.gitee.io/nceecountdown/

Search For You自己制作的 一个浏览器导航页

说明

最近实在是用腻了国内的一些导航页,edge和chrome的新页标签在我看来不怎么美观,所以就自己动手写了一个。

  • PC和手机端都做了适配(头一次搞,手机端有些不完美)
  • 使用了二次元随即壁纸API
  • 部分内容在B站上学的

内容

如图所示:

Search For You

地址:https://search.cairbin.top

HTML学习笔记——实体转义与块级行级元素

转义字符

1
2
3
4
5
6
7
&lt;    <!-- 小于号(<) -->
&gt; <!-- 大于号(>) -->
&amp; <!-- 与号(&) -->
&nbsp; <!-- 空格 -->
&copy; <!-- 版权号(©) -->
&times; <!-- 乘号(×) -->
&divide; <!-- 除号(÷) -->

块级元素与行级元素

块级元素

** 特性: **

  • 相当于执行display:block操作
  • 独占一行
  • ** 宽度和高度都是可控的,如果没设置其宽度,将默认铺满整行 **
  • 其内部可以包含块级元素和行级元素

如下:

1
2
<div></div>
<p></p>

行级元素

** 特性: **

  • 相当于执行了display:inline
  • 不会独占一行,与相邻的行级元素占同一行,直到占满,会自动掉到下一行
  • ** 宽度和高度不可控 **
  • 其内部只能包含行级元素

如下:

1
2
<strong></strong>
<span></span>

区别

分别给 * 块级元素p标签 * 和 * 行级元素span标签 * 设置如下属性

1
2
3
4
<p style="width:300px; height:50px; background:gray;">p</p>

<span style="width:300px; height:50px; background:gray;">span</span>

如图:
属性区别

我们可以明显看出 * 块级元素p标签 * 独占一行且可控宽度和高度(看颜色)
而 * 行级元素span标签* 并不独占一行,且不可控宽度和高度(看颜色)

行级、块级元素相互转换

二者可以相互转化,只需在其style中设置display的属性即可

例如:

1
2
3
4
5
<!-- 块级标签p转换成行级 -->
<p style="display:inline;"></p>

<!-- 行级标签span转换成块级 -->
<span style="display:block"></span>

HTML学习笔记——单双标签

单双标签

单标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 换行符 -->
<br/>
<!-- 水平线 -->
<hr/>
<!-- 图片标签 -->
<img/>
<!-- 文本标签 -->
<input/>
<!-- link标签 -->
<link/>
<!-- 元信息标签 -->
<meta/>

双标签

“开始标签”“结束标签” 两部分组成,必须成对使用。

常见的有

1
2
3
4
5
6
7
8
<p></p>
<html></html>
<title></title>
<body></body>
<table></table>
<span></span>
<div></div>
<h1></h1>

HTML学习笔记——文本格式化标签

文本格式化标签

b和strong

1
2
3
4
<!-- 都是行级标签(不会自动换行),都有加粗作用 -->
<!-- strong具有强调作用 -- >
<b>...</b>
<strong>...</strong>

i和em

1
2
3
4
<!-- 都可以使文字倾斜,都是行级标签。简单的倾斜效果用i标签就可以 -->
<!-- em还具有强调作用 -->
<i>...</i>
<em>...</em>

pre预格式文本

1
2
3
<!-- 预格式化文本,保留换行和宽度,但字号会小一号 -->
<!-- 块级标签,会独占一行 -->
<pre>...</pre>

small和big

1
2
3
4
5
6
7
8
<!-- 浏览器支持的最小字号为12px,要显示更小的字需另行处理。 -->

<!-- 都是行级标签 -- >
<!-- small会使文字小一号 -->
<small>...</small>

<!-- big会使文字大一号。big在html5中已淘汰但没删除,开发中尽量不要使用。 -->
<big>...</big>

sub和sup

1
2
3
4
5
<!-- sub为文本下标 -->
<sub>...</sub>

<!-- sup为文本上标 -->
<sup>...</sup>

如图所示

LoveKKComment插件修改邮件模版并美化

方法

[scode type=”yellow”]本插件版本1.0.5[/scode]

在该插件目录中找到reply.html文件,删除并新建reply.html写入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<table style="width:99.8%;height:99.8%">
<tbody>
<tr>
<td>
<div style="background: white;
width: 95%;
max-width: 800px;
margin: auto auto;
border-radius: 5px;
border:orange 1px solid;
overflow: hidden;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);">
<header style="overflow: hidden;">
<img style="width:100%;z-index: 666;" src="https://ftp.bmp.ovh/imgs/2020/03/c124a3068b0ba6c8.jpg">
</header>
<div style="padding: 5px 20px;">
<p style="position: relative;
color: white;
float: left;
z-index: 999;
background: orange;
padding: 5px 30px;
margin: -25px auto 0 ;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.30)">Dear&nbsp;{author}</p>
<br>
<h3>您有一条来自<a style="text-decoration: none;color: orange " target="_blank" href="{blogUrl}">{blogName}</a>的回复</h3>
<br>
<p style="font-size: 14px;">您在文章《{title}》上发表的评论:</p>
<p style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#eee;margin:15px 0px;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">{text}</p>
<p style="font-size: 14px;">{replyAuthor} 给您的回复如下:</p>
<p style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#eee;margin:15px 0px;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">{replyText}</p>

<div style="text-align: center;">
<img src="https://ftp.bmp.ovh/imgs/2020/03/8423219bbff23d56.png" alt="hr" style="width:100%;
margin:5px auto 5px auto;
display: block;">
<a style="text-transform: uppercase;
text-decoration: none;
font-size: 14px;
border: 2px solid #6c7575;
color: #2f3333;
padding: 10px;
display: inline-block;
margin: 10px auto 0; " target="_blank" href="{permalink}">点击查看回复的完整內容</a>
</div>
<p style="font-size: 12px;text-align: center;color: #999;">请勿直接回复<br>
©{blogName}</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>

##相关参数##

1
2
3
4
5
6
7
8
{blogUrl} //博客地址
{blogName} //博客名称
{author} //被回复者名称
{permalink} //文章链接
{title} //文章标题
{text} //被回复者评论内容
{replyAuthor} //回复者名称
{replyText} //回复内容

效果展示

效果

##感谢##

感谢大佬 摩尔 的帮助

HTML5 form标签method属性post与get的区别

post写法:

1
2
<form action="" method="post">  ...  </form>
<!-- action属性添加url -->

get写法:

1
2
3
<form action="" method="post"> ... </form>
<!-- action属性添加url -->

区别

get请求的数据会附在URL之后,如图
post把提交的数据放置在HTTP包的包体中,当提交数据需要的保密性高或数据量大时使用较多,传递数据隐匿

HTML5 input标签常使用类型

1
2
3
4
5
6
7
8
type="text" <!--文本输入框-->
type="password" <!--密码输入框-->
type="radio" <!--单选框-->
type="checkbox" <!--复选框-->
type="button" <!--普通按钮-->
type="submit" <!--提交按钮-->
type="reset" <!--重置按钮-->
type="file" <!--文件选择框-->

目前基本上都用 js 写交互,但作为一个初学者了解下还是有必要的。