HTML锚点追踪的三种方法

已于 2022-08-09 10:36:24 修改
阅读量1.1k 收藏 12
点赞数 5
分类专栏： 前端 文章标签： html 前端
于 2022-08-05 21:21:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42814833/article/details/126176188
版权

遇到超长页面，给用户最好的体验就是在侧边栏加上一些标题的锚点。最近在写项目时就遇到过这种情况，思索在滚动页面时锚点也应该高亮，又根据自己的遇到的实际情况提出了三种锚点追踪方法。

  1. 顶点法；指滚动条移动的像素超过某一元素，就对该元素对应锚点高亮
  2. 最近法：指距离滚动条最近的标题锚点进行高亮
  3. 比例法：将所有元素的高度对总高度进行求比，根据滚动条滚动的比例对锚点高亮

顶点法

我们首先要思考一个问题，滚动条本身是有长度的，所以滚动条能滚动的长度必然小于整个页面的高度。所以当滚动条滚动到最底端时，我们也要对最后一个元素的锚点进行高亮。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顶点法</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .item-div{
            height: 500px;
            text-align: center;

        }
        h1{
            line-height: 500px;
        }
    </style>
</head>
<body id="body">
    <div class="container">
        <div style="position: fixed;left: 0;">
            <div class="list-group">
                <a href="#item1" class="list-group-item active">
                    item1
                </a>
                <a href="#item2" class="list-group-item">item2</a>
                <a href="#item3" class="list-group-item">item3</a>
                <a href="#item4" class="list-group-item">item4</a>
                <a href="#item5" class="list-group-item">item5</a>
            </div>
        </div>

    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
    //组装测试的元素
    var itemModel = ['#FCD97D','#84C9EF','#DD7E81','#246B69','#C7C9E0']
    for (let i = 0; i < itemModel.length; i++) {
        var index=  i+1;
        $('.container').append('<div class="item-div" style="background: '+itemModel[i]+'" id="item'+index+'"><h1>item'+index+'</h1></div>')
    }
    
    
    //滚动的监听方法
    $(document).scroll(function (){
        //当前滚动的距离
        var current = document.documentElement.scrollTop;
        //页面的总高度
        var offsetHeight  = document.documentElement.offsetHeight
        //页面的可视高度
        var clientHeight = document.documentElement.clientHeight
        //offsetHeight - clientHeight得出的就是滚动条最大滚动的长度。
        //跟当前滚动距离相比较，相等则直接高亮最后的锚点
        if (current == offsetHeight - clientHeight){
            $('a').removeClass('active');
            $('a:last').addClass('active');
        }else{
            //对超过的最后一个元素锚点进行高亮
            //注意要给予一个默认的高亮节点，也就是第一个
            var divs = $('.item-div');
            var index = 0;
            for (let i = 0; i < divs.length; i++) {
                if (current >= $(divs[i]).offset().top){
                    index = i;
                }
            }
            $('a').removeClass('active');
            $('a:eq('+index+')').addClass('active');
        }
    })


</script>
</html>

效果图：
在这里插入图片描述
顶点法的缺陷是什么？发现没有，在滚动到上一个元素的所有内容都消失后，锚点却还停留在上一个。只是因为滚动的位置没有达到后一个元素的顶点。这非常不科学，正确的做法是在上一个元素的大部分内容消失后我们就跳跃到下一个节点，这就是最近法

最近法

具体的做法就是比较元素的顶点和当前滚动距离的差值，并取绝对值。高亮最小绝对值的元素对应锚点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最近法</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .item-div{
            height: 500px;
            text-align: center;

        }
        h1{
            line-height: 500px;
        }
    </style>
</head>
<body id="body">
<div class="container">
    <div style="position: fixed;left: 0;">
        <div class="list-group">
            <a href="#item1" class="list-group-item active">
                item1
            </a>
            <a href="#item2" class="list-group-item">item2</a>
            <a href="#item3" class="list-group-item">item3</a>
            <a href="#item4" class="list-group-item">item4</a>
            <a href="#item5" class="list-group-item">item5</a>
        </div>
    </div>

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
    //组装测试的元素
    var itemModel = ['#FCD97D','#84C9EF','#DD7E81','#246B69','#C7C9E0']
    for (let i = 0; i < itemModel.length; i++) {
        var index=  i+1;
        $('.container').append('<div class="item-div" style="background: '+itemModel[i]+'" id="item'+index+'"><h1>item'+index+'</h1></div>')
    }


    //滚动的监听方法
    $(document).scroll(function (){
        //当前滚动的距离
        var current = document.documentElement.scrollTop;
        //页面的总高度
        var offsetHeight  = document.documentElement.offsetHeight
        //页面的可视高度
        var clientHeight = document.documentElement.clientHeight
        //offsetHeight - clientHeight得出的就是滚动条最大滚动的长度。
        //跟当前滚动距离相比较，相等则直接高亮最后的锚点
        if (current == offsetHeight - clientHeight){
            $('a').removeClass('active');
            $('a:last').addClass('active');
        }else{
            //运算出绝对值，并进行比较，最终找到最小的那个值
            var divs = $('.item-div');
            var index = 0;
            var min = offsetHeight;
            for (let i = 0; i < divs.length; i++) {
                var diff = Math.abs($(divs[i]).offset().top - current);
                if (min >= diff){
                    min = diff;
                    index = i;
                }
            }
            $('a').removeClass('active');
            $('a:eq('+index+')').addClass('active');
        }
    })


</script>
</html>

效果图：

在这里插入图片描述

比例法

以上做的实现都是建立在元素内容的高度比较高，具体的标准是一个可见页的高度最多显示2个元素。当超过2个元素会发生什么，将 .item-div的height改成350，h1的line-height改成350。你会发现item4锚点是永远无法高亮的。在页面底端的可视高度内超过两个元素就会触发这个BUG，包括就近法。
如图，元素高度改为350px的顶点法：在这里插入图片描述

如何解决此问题，可以观察到主要问题的是滚动条的滚动距离并不等于页面的高度，有些元素的我们是触碰不到的。我们可以把滚动条滚动视为一个比例，将这个比例映射到总页面的高度，这样的话每一个元素都能被触碰。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比例法</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .item-div{
            height: 350px;
            text-align: center;

        }
        h1{
            line-height: 350px;
        }
    </style>
</head>
<body id="body">
<div class="container">
    <div style="position: fixed;left: 0;">
        <div class="list-group">
            <a href="#item1" class="list-group-item active">
                item1
            </a>
            <a href="#item2" class="list-group-item">item2</a>
            <a href="#item3" class="list-group-item">item3</a>
            <a href="#item4" class="list-group-item">item4</a>
            <a href="#item5" class="list-group-item">item5</a>
        </div>
    </div>

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
    //组装测试的元素
    var itemModel = ['#FCD97D','#84C9EF','#DD7E81','#246B69','#C7C9E0']
    for (let i = 0; i < itemModel.length; i++) {
        var index=  i+1;
        $('.container').append('<div class="item-div" style="background: '+itemModel[i]+'" id="item'+index+'"><h1>item'+index+'</h1></div>')
    }


    //滚动的监听方法
    $(document).scroll(function (){
        //当前滚动的距离
        var current = document.documentElement.scrollTop;
        //页面的总高度
        var offsetHeight  = document.documentElement.offsetHeight
        //页面的可视高度
        var clientHeight = document.documentElement.clientHeight
        //滚动条可活动的总高度
        var activeHeight = offsetHeight - clientHeight;
        //当没有滚动条时的高亮第一个
        if (activeHeight == 0){
            $('a').removeClass('active');
            $('a:first').addClass('active');
        }else{
            //经过转换后的滚动条距离
            var transformTop = current / activeHeight * offsetHeight;
            //对超过的最后一个元素锚点进行高亮
            //注意要给予一个默认的高亮节点，也就是第一个
            var divs = $('.item-div');
            var index = 0;
            for (let i = 0; i < divs.length; i++) {
                if (transformTop >= $(divs[i]).offset().top){
                    index = i;
                }
            }
            $('a').removeClass('active');
            $('a:eq('+index+')').addClass('active');
        }
    })


</script>
</html>

效果图：
在这里插入图片描述

还没完，当你点击锚点时会发现跳转后锚点的定位并不准确。这是因为锚点跳转的是元素的顶点，所以我们要对锚点跳转做一个特殊的处理，使滚动的距离正确。

具体的做法是在点击事件里进行计算，通过将元素的顶点距离和页面的总高度求比，再用这个比值乘于滚动条可以活动的长度，就是最终跳转的位置。又因为不是跳转到顶点，有时候元素的位置会非常的靠底部，可以加上元素本身的高度使其尽量靠前，但是这个值不能超过元素的顶点。修改后的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比例法</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .item-div{
            height: 350px;
            text-align: center;

        }
        h1{
            line-height: 350px;
        }
    </style>
</head>
<body id="body">
<div class="container">
    <div style="position: fixed;left: 0;">
        <div class="list-group">
            <a  ref="item1" class="list-group-item active">
                item1
            </a>
            <a  ref="item2" class="list-group-item">item2</a>
            <a  ref="item3" class="list-group-item">item3</a>
            <a  ref="item4" class="list-group-item">item4</a>
            <a  ref="item5" class="list-group-item">item5</a>
        </div>
    </div>

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
    //组装测试的元素
    var itemModel = ['#FCD97D','#84C9EF','#DD7E81','#246B69','#C7C9E0']
    for (let i = 0; i < itemModel.length; i++) {
        var index=  i+1;
        $('.container').append('<div class="item-div" style="background: '+itemModel[i]+'" id="item'+index+'"><h1>item'+index+'</h1></div>')
    }


    //滚动的监听方法
    $(document).scroll(function (){
        //当前滚动的距离
        var current = document.documentElement.scrollTop;
        //页面的总高度
        var offsetHeight  = document.documentElement.offsetHeight
        //页面的可视高度
        var clientHeight = document.documentElement.clientHeight
        //滚动条可活动的总高度
        var activeHeight = offsetHeight - clientHeight;
        //当没有滚动条时的高亮第一个
        if (activeHeight == 0){
            $('a').removeClass('active');
            $('a:first').addClass('active');
        }else{
            //经过转换后的滚动条距离
            var transformTop = current / activeHeight * offsetHeight;
            //对超过的最后一个元素锚点进行高亮
            //注意要给予一个默认的高亮节点，也就是第一个
            var divs = $('.item-div');
            var index = 0;
            for (let i = 0; i < divs.length; i++) {
                if (transformTop >= $(divs[i]).offset().top){
                    index = i;
                }
            }
            $('a').removeClass('active');
            $('a:eq('+index+')').addClass('active');
        }
    })


    /**
     * 点击锚点跳转，有一点要注意的是要让跳转的元素尽量靠前
     */
    $('.list-group-item').click(function (){
        //页面的总高度
        var offsetHeight  = document.documentElement.offsetHeight
        //页面的可视高度
        var clientHeight = document.documentElement.clientHeight
        //滚动条可活动的总高度
        var activeHeight = offsetHeight - clientHeight;
        //获取元素
        var offsetEle =$('#'+$(this).attr('ref'));
        //元素所在的高度
        var itemTop = offsetEle.offset().top
        //计算元素对应滚动条的y值，加上元素本身的长度保证元素尽量靠前
        var y = (itemTop+offsetEle.height())/offsetHeight*activeHeight
        //最终滚动的位置如果大于元素的顶点时使其相等，这一步是为了防止过长的元素直接跳转到尾部
        if (y > itemTop)y = itemTop;
        window.scroll(document.documentElement.offsetWidth,Math.floor(y))
    })

</script>
</html>

总结

顶点法和就近法相差不大，就近法更符合我们阅读的逻辑，一般情况这两种方法完全够用。比例法运用于元素的高度差距过大的情形，在页面可视高度包括两个以上的元素可以使用。

叫我带师
关注
  • 5
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
「HTML和CSS入门指南」a 标签详解
a451319296的博客
06-04 2112
标签是 HTML 中用于定义超链接的标签，可以用来实现网页间的跳转、下载文件等功能，并且可以与其他 HTML 元素配合使用。通过灵活运用 标签和属性，我们可以帮助用户更好地浏览页面内容，同时也可以美化和装饰页面。在实际应用中需要注意遵循 HTML 的规范，合理设置各种属性，并且避免滥用嵌套其他元素。
【前端三分钟】锚点自动跟随滚动定位
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
03-06 8340
什么都不说了，直接上代码： &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; &amp;amp;amp;a
html中锚点的应用
09-28
很少用到锚点的知识，但今天又看到了，就要记录下来，它同样也有着如asp传值一样的功效，虽然不是那么强打
HTML如何添加锚点，附超全教程文档
最新发布
m0_60608008的博客
03-06 670
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。
html中设置锚点定位的几种常见方法
【欢迎关注公众号：冬瓜白】
11-03 1241
在html中设置锚点定位我知道的有几种方法，使用id定位、使用name定位、使用js定位，这些方法大家可以参考下 1、使用id定位： <a href="#1F" name="1F">锚点1</a> <div name="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>1111111.
html基础标签+Http请求
zhoutong2323的博客
03-03 898
我们想象一个场景，当我们在浏览器中输入网址后，网页会自动生成对应网页且打开曾经登录过的网站，发现无需重新登录直接进入首页，这是如何做到的呢？其实，当们在浏览器输入网址后浏览器会通过网址中域名解析出的IP地址访问该网址对应的服务器；服务器收到浏览器发出的请求后，根据网址中包含的执行方法，路径信息等信息返回相应的文本信息，最终浏览器解析服务器返回的信息从而生成对应的网页！！！
HTML 元素（2）
weixin_42350100的博客
10-31 6446
HTML Elements
了解HTML锚点
yuanli_的博客
08-27 9738
概念 　<a>元素(或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接。但严格来说，<a>元素不是一个链接，而是超文本锚点，可以链接到一个新文件、用id属性指向任何元素。如果没有<a>元素没有href属性的话，可以作为原本链接位置的占位符，常用于home链接 　　[注意]任何文档流内容都可以被嵌套，只要不是交互内容类别(如按钮、链接等) 属性 href 　　href属性表示地址，共包括以下3种： 　　1、链接地址 &...
Html中锚点的使用
qq_40179479的博客
12-23 4389
URL是由多个部分组成。包括协议、主机（域名）、端口、路径、查询参数和锚点锚点（anchor）是网页内部的定位点，使用#加上锚点名称，放在网址的最后，比如#anchor。浏览器加载页面以后，会自动滚动到锚点所在的位置。锚点名称通过网页元素的id属性命名。id属性是元素在网页内的唯一标识符。比如，网页可能包含多个标签，id属性可以指定每个标签的唯一标识符。
4种方法实现html 页面内锚点定位及跳转
阿牛哥的博客
08-25 5388
scrollIntoView()是 HTML 元素的一个方法，假如我们有一个元素容器出现了滚动条，有滚动条必然就有一些元素是不可见的，为了让隐藏的元素可见，我们可以手动滚动滚动条，让元素出现，另一种方法就是调用隐藏元素的 scrollIntoView 方法，让它自动滚动到可视区内。
【Html与CSS基础】HTML中的锚点
Thedemonsword的专栏
04-16 7799
用锚点，回到顶部、回到底部、到文章中任意段落 提示：可以自己动手尝试 文章目录 前言 一、锚点是什么？ 二、使用步骤 1.操作 2.锚点示例 总结 前言 提示：锚点通俗来说就是起到文章目录的作用，精准跳转到文章指定位置 一、锚点是什么？ 在我们学习HTML的过程中，要理解写页面的作用，最初写页面的本质是为了文章服务的，一篇文章如果太长，我们想回到顶部、或者回到某一个段落就会费劲儿，所以锚点就是为了精准定位段落，起到目录的效果。 二、使用步骤 1.操作 1.
html中设置锚点定位常用的三种方法
qq_36031730的博客
09-08 1363
第一种 id定位 <a href="#place">锚点</a> <div id="place"> <p> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br&
vue中锚点的三种方法
08-27
本文给大家带来了vue中锚点的三种方法，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧
HTML标签及Java中内存中所创建对象调用的流程
2301_79927426的博客
12-25 30
在HTML标签中，dl标签用于定义描述列表，会和dt和dd一起使用。即dd来解释dt中的内容。
[HTML5]：超链接(a标签)、锚点定位和头部元素
我只是个程序员。
09-09 2万+
使用标签 标签用于定义超链接，用于从一张页面链接到另一张页面。 元素最重要的属性是 href 属性，它负责指示链接目标。也用于设置锚点，用于页面定位。 在所有浏览器中，链接的默认外观是： 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接带有下划线而且是红色的 如果想要更改默认样式，可以使用a元素伪类来定义样式。
锚点定位的三种解决方法
热门推荐
weixin_42839080的博客
09-23 4万+
因为在项目中遇到锚点定位的问题，觉得有必要单独成文，来介绍锚点定位的解决办法。 一 学习锚点定位之前的知识储备: 1.1 #号的作用 #代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，http://www.example.com/index.html#print 就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。 为网页位置...
HTML-----锚点定位
qq_42057046的博客
05-13 1286
我们常用的链接大都是跳转到其他网页的，链接的是外部地址。在一些情况下，由于我们的篇幅过长，用户在查找时是非常麻烦的，而如果我们再往也的首端加入目录，并且点击目录用户可以直接到达网页中目录对应的地址，这在很大程度上提高了查找的效率，这种方法使用锚点定位实现的。下面将介绍锚点定位的实现方法 锚点定位 锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。锚点定位有很多种写法，下面...
html 锚点追踪
笔记库
09-19 287
// 锚点自动选择 function checkscroll() { if ($('#p1').length <= 0) { return; } // 为页面添加页面滚动监听事件 var wst = $(window).scrollTop() + 200 // 滚动条距离顶端值 for (i = 1; i &l...
html锚点 滚动锚点
05-27
HTML锚点是一种在网页中创建跳转链接的方式，它可以让用户通过点击链接跳转到文档中的某个位置。滚动锚点是指当用户点击锚点链接后，页面会自动滚动到指定位置。 要在HTML中创建锚点，可以在目标位置使用id属性来给该位置命名，例如： ``` <h2 id="section1">Section 1</h2> ``` 然后在其他位置创建链接时，使用该id属性来指定目标位置，例如： ``` <a href="#section1">跳转到Section 1</a> ``` 当用户点击该链接时，页面会自动滚动到id为"section1"的位置。 需要注意的是，如果目标位置在页面中被覆盖或隐藏，滚动锚点可能无法正常工作。此外，滚动锚点可能会受到浏览器和设备的限制，不同的浏览器和设备可能会有不同的滚动效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值