锚点-点击跳转到页面指定位置

本文介绍了如何利用JavaScript实现点击目录时跳转到页面相应位置,通过锚点和animate方法进行页面滚动。简单的方法是设置a标签锚点,但链接地址会改变;另一种是使用animate方法平滑滚动到目标位置,提供了两种常见且兼容性较好的实现方式,并给出了相关参考资料。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本来是在看阮大神写的ajax教程,突然发现点击目录文字会跳转到相对应的文本内容,于是乎激发了我的兴趣。

这个究竟怎么做的,刚开始看的时候一知半解,找度娘就是:“点击跳转到页面指定位置”,找了下,原来专业术语叫:锚点。

度娘真是个博大精深的地方,有着多种的方法可以使用。

最简单的一种:

设置a标签的锚点就行啦,但是有个确定链接会更改,不利于刷新

正在上传…重新上传取消​

<div class="skip" id="skip">
    <h2>目录</h2>
    <ul>
        <li>
            <a href="#toc0" class="aaa">点击文字跳转</a>
            <!--herf的值一定要带#号,并且要和相对应要跳转的值一致-->
        </li>
    </ul>
    <div class="chapter" style="margin-top: 850px;">
        <a name="toc0" class="aaa1">文字跳转到这里</a>
        <!--这里的a标签可以用name也可以用id-->
        <p>心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假
            心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假</p>
    </div>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值