不同页面之间跳转：
页面1
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面1</title> </head> <body> <a href="2.html#a1">点我</a><!--此处id要与页面2保持一致--> </body> </html>
页面2
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面2</title> </head> <body> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a id="a1">跳到这里了</a><!--此处id要与页面1保持一致--> <br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> <a href="javascript:void(0)">1</a><br/> <a href="javascript:void(0)">2</a><br/> <a href="javascript:void(0)">3</a><br/> <a href="javascript:void(0)">4</a><br/> <a href="javascript:void(0)">5</a><br/> <a href="javascript:void(0)">6</a><br/> <a href="javascript:void(0)">7</a><br/> <a href="javascript:void(0)">8</a><br/> <a href="javascript:void(0)">9</a><br/> </body> </html>
点击页面1的链接，可跳转到页面2的锚点处
效果图：
同页面跳转：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>锚点链接</title> <style> *{ margin: 0; padding: 0; } a{ list-style: none; text-decoration: none; } </style> </head> <body> <a href="#tiaozhuan_1">跳转一</a> <a href="#tiaozhuan_2">跳转二</a> <div style="100%; height:500px; background:#0066FF;">我是占位的块</div> <div style="100%; height:450px; background:#66FFFF;"><a id="tiaozhuan_1">我是跳转一跳到的位置</a></div> <div style="100%; height:450px; background:#99CC00;"><a id="tiaozhuan_2">我是跳转二跳到的位置</a></div> <div style="100%; height:500px; background:#0066FF;">我是占位的块</div> </body> </html>
说明：点击跳转一跳到一的位置，点击跳转二跳到二的位置
***************************************************************************************
<!--
location.href 用来跳转到指定页面或获取当前页面的地址
location.hash #后内容 设置或者获取锚点链接(以#开头)
search ?后的内容 给当前地址设置参数或者获取当前地址中的参数(以？开头)
-->