锚点链接之-----同/不同一页面跳转

不同页面之间跳转:

页面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="width:100%; height:500px; background:#0066FF;">我是占位的块</div>
<div style="width:100%; height:450px; background:#66FFFF;"><a id="tiaozhuan_1">我是跳转一跳到的位置</a></div>
<div style="width:100%; height:450px; background:#99CC00;"><a id="tiaozhuan_2">我是跳转二跳到的位置</a></div>
<div style="width:100%; height:500px; background:#0066FF;">我是占位的块</div>

</body>
</html>

说明:点击跳转一跳到一的位置,点击跳转二跳到二的位置

***************************************************************************************

<!--
location.href 用来跳转到指定页面或获取当前页面的地址
location.hash #后内容 设置或者获取锚点链接(以#开头)
search ?后的内容 给当前地址设置参数或者获取当前地址中的参数(以?开头)
-->

 

posted @ 2017-03-21 15:50  贺小鸣  阅读(6853)  评论(0编辑  收藏  举报
为尊重他人劳动成果,转载/摘抄请标明来源!