錨點定位算是一個很熟悉的功能了，以前都是使用a標籤的href=#XXX來實現，如下：
但是這種方法位址列會變化，會給人一種誤以為頁面重新整理的錯覺，如果需要進行位址列的操作，還得加一些判斷，比較麻煩，所以採用了一種新的方式來進行錨點定位，就是scrollIntoView
以下為使用scrollIntoView實現的通訊錄功能的錨點定位
粗略效果圖：
具體程式碼
<template>
<div class="test clear">
<div class="left-letter">
<span v-for="(letter,letterIndex) in letterList" :key="letterIndex" @click="toLetters(letter)">{{letter}}</span>
</div>
<ul class="student-container">
<li v-for="(student, stIndex) in studentInfo" :key="stIndex">
<span :class="{'spell-letter': true, 'selected': student.spell.toUpperCase().slice(0, 1) === selectLetter}" :id="student.spell.toUpperCase().slice(0, 1)" v-if="stIndex===0 || studentInfo[stIndex].spell.toUpperCase().slice(0, 1) !== studentInfo[stIndex - 1].spell.toUpperCase().slice(0, 1)">{{student.spell.toUpperCase().slice(0, 1)}}</span>
<div>
<var>{{student.name}}</var>
<var>{{student.number}}</var>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'test',
data(){
return {
studentInfo: [
{
name: '白芸維',
spell: 'baiyunwei',
number: '001'
},
{
name: '柏楠',
spell: 'bonan',
number: '002'
},
{
name: '陳建熹',
spell: 'chenjianxi',
number: '003'
},
{
name: '陳天佑',
spell: 'chentianyou',
number: '004'
},
{
name: '東西',
spell: 'dongxi',
number: '008'
},
{
name: '桂怡',
spell: 'guiyi',
number: '005'
},
{
name: '黃英',
spell: 'huangyin',
number: '009'
},
{
name: '黃小',
spell: 'huangxiao',
number: '0010'
},
{
name: '黃決賽',
spell: 'huangjuesai',
number: '0011'
},
{
name: '黃英里',
spell: 'huangyinli',
number: '0012'
},
{
name: '雪梨',
spell: 'xueli',
number: '0013'
},
{
name: '楊穎',
spell: 'yangyin',
number: '006'
},
{
name: '曾志偉',
spell: 'zengzhiwei',
number: '007'
},
], //學生資訊列表
letterList: [], //字母列表
selectLetter: '', //被選中的字母
}
},
created() {
// 初始化字母列表
this.studentInfo.forEach((e, index)=>{
//過濾字母，重複的不選
if (index === 0) {
this.letterList[0] = e.spell.toUpperCase().slice(0, 1)
this.selectLetter = this.letterList[0]
} else if (index != 0 && this.studentInfo[index].spell.toUpperCase().slice(0, 1) !== this.studentInfo[index - 1].spell.toUpperCase().slice(0, 1)) {
this.letterList.push(e.spell.toUpperCase().slice(0, 1))
}
})
},
methods: {
// 點選左側字母，右側學生列表滾動到指定位置
toLetters(letter) {
this.selectLetter = letter
let e = document.getElementById(letter)
if (e) {
e.scrollIntoView() //滾動到指定位置
}
}
}
}
</script>
<style lang="less" scoped>
.test {
width: 1200px;
margin: 20px auto 0;
.left-letter {
position: fixed;
top: 228px;
left: 78px;
width: 20px;
border: 1px solid #d8d8d8;
background: #f9f9f9;
span {
display: block;
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
span:hover {
background: #d0e8ed;
color: #0d858e;
}
}
.student-container {
position: relative;
float: left;
width: 200px;
margin-left: 100px;
// border: 1px solid #d8d8d8;
li {
padding: 0 10px;
span {
position: absolute;
color: #999;
font-weight: bold;
}
span.selected {
color: #0d858e;
}
div {
padding: 10px 10px 0;
margin-left: 30px;
border: 1px solid #d8d8d8;
var {
display: block;
margin-bottom: 10px;
}
}
}
}
}
</style>複製程式碼scrollIntoView是js的原生方法，所以需要document.getElementById或者querySelector來獲得元素，然後才可以點出來scrollIntoView( )方法
scrollIntoView的預設值為true：
element.scrollIntoView()
= element.scrollIntoView(true)
= element.scrollIntoView({block:start,inline:nearest})複製程式碼element.scrollIntoView(false) = element.scrollIntoView({block:end,inline:nearest})複製程式碼behavior定義動畫：auto | instant | smooth
block定義滾動位置： start | end