• 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)

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

  • 相关阅读:
    支持向量机(SVM)—— 详细推导及案例应用可视化
    创建线程的方式打开记事本
    LeetCode 1465. 切割后面积最大的蛋糕:纵横分别处理
    权限系统设计(转载)
    [附源码]计算机毕业设计springboot现代诗歌交流平台
    利用小红书笔记API:为你的应用注入新活力
    【2022秋招面经】——NLP
    C++高级面试题:解释 C++ 中的行为参数化(Behavioral Parameterization)
    01.qtcreator介绍
    为什么进行压力测试? 有哪些方法?
  • 原文地址:https://blog.csdn.net/qq_41581588/article/details/125408698