• js 锚点定位的方法


    js原生 锚点定位的方法

    1.  用法:  document.getElementById("#" + id).scrollIntoView(true);
    2.         document.getElementById("#" + id).scrollIntoView(false);
    3. // 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。
    4. // 如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。

    1. <div class="project-left">
    2. <div class="project-card" v-for="(item,index) in 6" :id="'card' + index" @click="goToAnchor(index)">
    3. 测试
    4. </div>
    5. </div>

    // 右侧滚动元素

    1. <div class="result-card" v-for="(item,index) in 17" :id="'div' + index">
    2. <Collapse v-model="item.value" accordion>
    3. <Panel name="1">
    4. 史蒂夫·乔布斯{{ index }}
    5. <div slot="content">
    6. <Table :columns="columns1" :data="data1"></Table>
    7. </div>
    8. </Panel>
    9. <Panel name="2">
    10. 斯蒂夫·盖瑞·沃兹尼亚克
    11. <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克(Stephen Gary
    12. Wozniak),美国电脑工程师,曾与史蒂夫·乔布斯合伙创立苹果电脑(今之苹果公司)。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学,后转学入美国著名高等学府加州大学伯克利分校(UC
    13. Berkeley)并获得电机工程及计算机(EECS)本科学位(1987年)。</p>
    14. </Panel>
    15. <Panel name="3">
    16. 乔纳森·伊夫
    17. <p slot="content">
    18. 乔纳森·伊夫是一位工业设计师,现任Apple公司设计师兼资深副总裁,英国爵士。他曾参与设计了iPod,iMac,iPhone,iPad等众多苹果产品。除了乔布斯,他是对苹果那些著名的产品最有影响力的人。</p>
    19. </Panel>
    20. </Collapse>
    21. </div>

     // JS部分

    1. goToAnchor(index){
    2. document.querySelector('#div' + index).scrollIntoView({
    3. block: 'start',
    4. behavior: 'smooth'
    5. });
    6. },

    用到的方法:

     scrollIntoView

    1. el.scrollIntoView(); // 等同于el.scrollIntoView(true)
    2. el.scrollIntoView(false);

    如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);

    如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。

    如果没有提供该参数,默认为true。

    1. //这个title-part元素将以平滑的滚动方式滚动到与视口底部齐平地方(有兼容性问题)
    2. document.querySelector("#title-part").scrollIntoView({
    3. block: 'end',
    4. behavior: 'smooth'
    5. })
    6. //这个article-part元素将以平滑的滚动方式滚动到与视口顶部齐平地方(有兼容性问题)
    7. document.querySelector("#article-part").scrollIntoView({
    8. block: 'start',
    9. behavior: 'smooth'
    10. })
    11. //这个articleMU-part元素将木讷的瞬间滚动到与视口顶部齐平地方(无滚动动画效果)
    12. document.querySelector("#articleMU-part").scrollIntoView();//默认值就是true,可以不写
    13. //这个titleMU-part元素将木讷的瞬间滚动到与视口底部齐平地方(无滚动动画效果)
    14. document.querySelector("#titleMU-part").scrollIntoView(false)

     // 注意 页面一定要能滚动,这个方法才会生效,否则,你让我如何给你滚动呢?

  • 相关阅读:
    C#应用程序的多语言方案 - 开源研究系列文章
    【Web-CSS基础】CSS的三大特性、定位方式、静态定位、相对定位、绝对定位、浮动定位、固定定位、设置缩放动画
    底层驱动day4作业
    gitlab-runner注册失败提示401 Unauthorized解决
    【微服务|Nacos】Nacos实现多环境和多租户的数据隔离
    gdb 挂载动态链接库符号表
    C++面向对象程序设计(第2版)第二章(类和对象的特性)知识点总结
    WPF 02
    大语言模型LLM推理加速:Hugging Face Transformers优化LLM推理技术(LLM系列12)
    Fortinet 2023上半年全球威胁态势研究报告:勒索软件检测成下降趋势,针对性攻击持续升温
  • 原文地址:https://blog.csdn.net/qq_41581588/article/details/125408698