a标签小妙用

a标签小妙用

大家都知道a标签是超链接跳转，发邮箱，打电话，也可以做锚点，页面跳转

超链接跳转

target的属性：

• _self 默认，当前页面加载
• _blank 新窗口打开
• _parent 父窗口打开，如果没有parent框架或者浏览上下文，此选项的行为方式与 _self 相同。
• _top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self

百度一下
百度一下

不想跳转页面的话，可以使用 href="javascript:void(0)"

不跳转

发邮箱

Email

就是点击Email会弹出系统的发邮件窗口

打电话

12345678901

在移动端点击12345678901，可以拨打电话

锚点的使用

页内跳转

a标签的href属性的值设置为 # 和 需要跳转到其他标签的id的这， #id

    
    
    
    


    
热爱前端
    
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
    跳转到热爱前端
    跳转到热爱分享
    
01
    
02
    
03
    
04
    
05
    
06
    
07
    
08
    
09
    
10
    
热爱分享
    
11
    
12
    
13
    
14
    
15
    
16
    
17
    
18
    
19
    
20
    
21
    
22
    
23
    
24
    
25
    
26
    
27
    
28
    
29
    
30

返回顶部

这里还有个小技巧，就是href的值设置为#，就可以回到顶部

返回顶部

不过这里需要注意下： 如果页面不是首页（根目录），是子路由的话，使用href="#"，会跳转到首页的

优化返回顶部滚动

这里使用 scroll-behavior: smooth; 这个css样式的话, 会平稳的滚动

scroll-behavior MDN教程详解

平稳返回顶部

    
    
    
    
    


    
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
    
01
    
02
    
03
    
04
    
05
    
06
    
07
    
08
    
09
    
10
    
11
    
12
    
13
    
14
    
15
    
16
    
17
    
18
    
19
    
20
    
21
    
22
    
23
    
24
    
25
    
26
    
27
    
28
    
29
    
30
    返回顶部

全站返回顶部

想要做全局的返回顶部通用组件，就使用css + js 结合了，也比较简单， 上代码：

download属性下载文件

download的值是下载保存的文件名

点击下载

使用download属性将 保存为 PNG 格式

var link = document.createElement('a');
link.innerHTML = 'download image';

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

可以看看这个例子 https://jsfiddle.net/codepo8/V6ufG/2/