锚点回到顶部
錨點(diǎn)在本頁面跳轉(zhuǎn)有三種方式比較常用，可以用來回到頂部，代碼奉上。
1.給錨點(diǎn)文本標(biāo)簽添加id,針對任何標(biāo)簽來定位都生效
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">.n2{width: 50px;height: 50px;background: pink;position: fixed;right: 20px;bottom: 30px;font-size: 16px;}a{color: #000;text-decoration: none;}</style></head><body><div class="n1" id="here">頭部</div><p>hahahah</p><p>hahahah</p><p>hahahah</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><div class="n2"><a href="#here">點(diǎn)我回到頭部</a></div></body> </html>2.給a標(biāo)簽的文本添加錨點(diǎn)，使用name屬性只能針對a標(biāo)簽來定位
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">.n2{width: 50px;height: 50px;background: pink;position: fixed;right: 20px;bottom: 30px;font-size: 16px;}a{color: #000;text-decoration: none;}</style></head><body><a href="#" name="here">頭部</a><p>hahahah</p><p>hahahah</p><p>hahahah</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><div class="n2"><a href="#here">點(diǎn)我回到頭部</a></div></body> </html>3.使用js
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">.n2{width: 50px;height: 50px;background: pink;position: fixed;right: 20px;bottom: 30px;font-size: 16px;}a{color: #000;text-decoration: none;}</style></head><body><div class="n1" id="here">頭部</div><p>hahahah</p><p>hahahah</p><p>hahahah</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><li class="" onclick="javascript:document.getElementById('here').scrollIntoView()">小尾巴</li></body> </html>?
總結(jié)
- 上一篇： 一看就明白的超标量超流水线超线程简介
- 下一篇： 搭建离线 Nexus3 仓库