html超链接的锚点链接的使用

1.创建盒子里面放入章节名字和章节内容

<p align="center" class="title">

        <a href="#top1">第一回　甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a>

        <a href="#top2">第二回　贾夫人仙逝扬州城 冷子兴演说荣国府</a>

        <a href="#top3">第三回　金陵城起复贾雨村 荣国府收养林黛玉</a>

        <a href="#top4">第四回　薄命女偏逢薄命郎 葫芦僧乱判葫芦案</a>

    </p>

    <div class="box">

        <!-- 第一个锚点 -->

        <a name="top1"></a>

        <p>

            <strong>

                <a href="">第一回　甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a>

            </strong>

        </p>

        <p>　　列位看官：你道此书从何而来？说起根由，虽近荒唐，细按则深有趣味。待在下将此来历注明，方使阅者了然不惑。</p>

        <p>　　原来女娲氏炼石补天之时，于大荒山无稽崖炼成高经十二丈、方经二十四丈顽石三万六千五百零一块。娲皇氏只用了三万六千五百块，只单单剩了一块未用，便弃在此山青埂峰下。谁知此石自经煅炼之后，灵性已通，因见众石俱得补天，独自己无材不堪入选，遂自怨自叹，日夜悲号惭愧。</p>

        <p>　　一日，正当嗟悼之际，俄见一僧一道远远而来，生得骨格不凡，丰神迥别，说说笑笑，来至峰下，坐于石边，高谈快论：先是说些云山雾海、神仙玄幻之事，后便说到红尘中荣华富贵。此石听了，不觉打动凡心，也想要到人间去享一享这荣华富贵，但自恨粗蠢，不得已，便口吐人言，向那僧道说道：“大师，弟子蠢物，不能见礼了！适闻二位谈那人世间荣耀繁华，心切慕之。弟子质虽粗蠢，性却稍通，况见二师仙形道体，定非凡品，必有补天济世之材，利物济人之德。如蒙发一点慈心，携带弟子得入红尘，在那富贵场中，温柔乡里受享几年，自当永佩洪恩，万劫不忘也！”二仙师听毕，齐憨笑道：“善哉，善哉！那红尘中却有些乐事，但不能永远依恃；况又有‘美中不足，好事多磨’八个字紧相连属，瞬息间则又乐极悲生，人非物换，究竟是到头一梦，万境归空，倒不如不去的好。”这石凡心已炽，那里听得进这话去，乃复苦求再四。二仙知不可强制，乃叹道：“此亦静极思动，无中生有之数也！既如此，我们便携你去受享受享，只是到不得意时，切莫后悔！”石道：“自然，自然。”那僧又道：“若说你性灵，却又如此质蠢，并更无奇贵之处。如此也只好踮脚而已。也罢！我如今大施佛法，助你助，待劫终之日，复还本质，以了此案。你道好否？”石头听了，感谢不尽。那僧便念咒书符，大展幻术，将一块大石登时变成一块鲜明莹洁的美玉，且又缩成扇坠大小的可佩可拿。那僧托于掌上，笑道：“形体倒也是个宝物了！还只没有实在的好处，须得再镌上数字，使人一见便知是奇物方妙。然后好携你到那昌明隆盛之邦、诗礼簪缨之族、花柳繁华地、温柔富贵乡去安身乐业。”石头听了，喜不能禁，乃问：“不知赐了弟子那哪几件奇处？又不知携了弟子到何地方？望乞明示，使弟子不惑。”那僧笑道：“你且莫问，日后自然明白的。”说着，便袖了这石，同那道人飘然而去，竟不知投奔何方何舍。 </p>

        <p>　　后来，不知过了几世几劫，因有个空空道人访道求仙，从这大荒山无稽崖青埂峰下经过，忽见一大块石上字迹分明，编述历历。空空道人乃从头一看，原来就是无材补天，幻形入世，蒙茫茫大士、渺渺真人携入红尘，历尽离合悲欢、炎凉世态的一段故事。后面又有一首偈云：  </p>

    </div>

2.在章节处设置锚点，并在相应位置添加锚点name，添加锚点链接的写法，<a href="#锚点名">

<p align="center" class="title">

        <a href="#top1">第一回　甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a>

        <a href="#top2">第二回　贾夫人仙逝扬州城 冷子兴演说荣国府</a>

        <a href="#top3">第三回　金陵城起复贾雨村 荣国府收养林黛玉</a>

        <a href="#top4">第四回　薄命女偏逢薄命郎 葫芦僧乱判葫芦案</a>

    </p>

<!-- 第一个锚点 -->

        <a name="top1"></a>

        <p>

            <strong>

                <a href="">第一回　甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a>

            </strong>

      </p>

 <!-- 第二个锚点 -->

        <a name="top2"></a>

        <p>

            <strong>

                <a href="">第二回　贾夫人仙逝扬州城 冷子兴演说荣国府</a>

            </strong>

      </p>

 <!-- 第三个锚点 -->

        <a name="top3"></a>

        <p>

            <strong>

                <a href="">第三回　金陵城起复贾雨村 荣国府收养林黛玉</a>

            </strong>

        </p>

<!-- 第四个锚点 -->

        <a name="top4"></a>

        <p>

            <strong>

                <a href="">第四回　薄命女偏逢薄命郎 葫芦僧乱判葫芦案</a>

            </strong>

        </p>

3.添加样式如下

*{

    margin: 0;

    padding: 0;

}

body{

    background-image: url('/img/sback.jpg');

    background-repeat: repeat;

    font-size: 14px;

    font-family: '微软雅黑';

}

.box{

    width: 980px;

    margin: 0 auto;

    background-color: #fff;

    padding-top: 10px;

    padding-right: 10px;

    padding-bottom: 10px;

    padding-left: 10px;

}

.box p{

    font-size: 16px;

    line-height: 23px;

}

a{

    color: lightcoral;

    text-decoration: none;

}

a:hover{

    color: aqua;

}

.title{

    margin-bottom: 30px;

}

当我们点击章节名字时跳转到盒子里章节内容