Vue使用原生JS实现锚点跳转滚动效果

本文使用iView 

// 左侧导航元素

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

</div>

// 右侧滚动元素

<div class="result-card" v-for="(item,index) in 17" :id="'div' + index">
    <Collapse v-model="item.value" accordion>
        <Panel name="1">
            史蒂夫·乔布斯{{ index }}
            <div slot="content">
                <Table :columns="columns1" :data="data1"></Table>
            </div>

        </Panel>
        <Panel name="2">
            斯蒂夫·盖瑞·沃兹尼亚克
            <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary
                Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC
                Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
        </Panel>
        <Panel name="3">
            乔纳森·伊夫
            <p slot="content">
                乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
        </Panel>
    </Collapse>
</div>

 

 // JS部分

goToAnchor(index){
    document.querySelector('#div' + index).scrollIntoView({
        block: 'start',
        behavior: 'smooth'
    });
},

用到的方法：

 scrollIntoView

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

如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；

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

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

 

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

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