js 锚点定位
DOCTYPE html>
<html>
<head>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
h2 {
position: fixed;
margin:50px 500px;
}
style>
head>
<body>
<h2>
<a href="#div1" rel="external nofollow" >to div1a>
<a href="#div2" rel="external nofollow" >to div2a>
<a href="#div3" rel="external nofollow" >to div3a>
h2>
<div id="div1">div1div>
<div id="div2">div2div>
<div id="div3">div3div>
body>
html>
vue 的锚点定位
<template>
<div>
<el-tabs
class="fixed-header-left-person"
tab-position="left"
@tab-click="jump"
v-model="tabName"
>
<el-tab-pane
v-for="(tab, index) in tabs"
:name="tab.refName"
:key="index"
:label="tab.name"
></el-tab-pane>
</el-tabs>
<div
class="scroll-content"
@scroll="onScroll"
:style="
'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height
"
>
<!-- 用户管理 -->
<div :ref="tabs[0].refName" class="scroll-item">
<div class="line-name">
<h2>{{ tabs[0].name }}</h2>
</div>
<div>
<p
style="height: 40px"
v-for="item in [ 0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]"
:key="item"
>
待发货符合规范化如故
</p>
</div>
</div>
<!-- 配置管理 -->
<div :ref="tabs[1].refName" class="scroll-item">
<div class="line-name">
<h2>{{ tabs[1].name }}</h2>
</div>
<div>
<p
style="height: 40px"
v-for="item in [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]"
:key="item"
>
新能说出的基本功发到你DNF不得发布
</p>
</div>
</div>
<!-- 角色管理 -->
<div
:ref="tabs[2].refName"
class="scroll-item"
style="padding-top: 1rem; top: 5px"
>
<div class="line-name">
<h2>{{ tabs[2].name }}</h2>
</div>
<div>
<p
v-for="item in [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 ]"
:key="item"
>
新水泥厂剧场版
</p>
</div>
</div>
<!-- 角色管理2 -->
<div
:ref="tabs[3].refName"
class="scroll-item"
style="padding-top: 1rem; top: 5px"
>
<div class="line-name">
<h2>{{ tabs[3].name }}</h2>
</div>
<div>
<p
v-for="item in [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, ]"
:key="item"
>
新水泥厂剧场版
</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'index',
props: {},
components: {},
data() {
return {
tabIndex: '0',
contentStyleObj: {
height: '100px',
},
tabName: 'setOneRef',
tabs: [
{
name: '用户管理',
refName: 'setOneRef',
},
{
name: '配置管理',
refName: 'setTwoRef',
},
{
name: '角色管理',
refName: 'setThreeRef',
},
{
name: '角色管理2',
refName: 'setFourRef',
},
],
}
},
computed: {},
watch: {},
created() {
this.getHight()
window.addEventListener('resize', this.getHight)
},
destroyed() {
window.removeEventListener('resize', this.getHight)
},
methods: {
jump(tab, event) {
let target = document.querySelector('.scroll-content')
let scrollItems = document.querySelectorAll('.scroll-item')
if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
this.tabIndex = tab.index.toString()
}
let totalY = scrollItems[tab.index].offsetTop - scrollItems[0].offsetTop
let distance = document.querySelector('.scroll-content').scrollTop
let step = totalY / 50
if (totalY > distance) {
smoothDown(document.querySelector('.scroll-content'))
} else {
let newTotal = distance - totalY
step = newTotal / 50
smoothUp(document.querySelector('.scroll-content'))
}
function smoothDown(element) {
if (distance < totalY) {
distance += step
element.scrollTop = distance
setTimeout(smoothDown.bind(this, element), 10)
} else {
element.scrollTop = totalY
}
}
function smoothUp(element) {
if (distance > totalY) {
distance -= step
element.scrollTop = distance
setTimeout(smoothUp.bind(this, element), 10)
} else {
element.scrollTop = totalY
}
}
},
onScroll(e) {
let scrollItems = document.querySelectorAll('.scroll-item')
for (let i = scrollItems.length - 1; i >= 0; i--) {
let judge =
e.target.scrollTop >=
scrollItems[i].offsetTop - scrollItems[0].offsetTop - 400
if (judge) {
this.tabIndex = i.toString()
this.tabName = this.tabs[this.tabIndex].refName
break
}
}
},
getHight() {
this.contentStyleObj.height = window.innerHeight - 190 + 'px'
},
},
}
</script>
<style scoped>
.fixed-header-left-person /deep/.el-tabs__item{
height: 27px;
width: 80px;
line-height: 22px;
border: none;
border-radius: 4px;
padding: 4px !important;
margin: 0px;
text-align: center;
}
.fixed-header-left-person{
float: left;
width: 80px;
}
.fixed-header-left-person /deep/ .el-tabs__nav-wrap{
position: relative;
left:0px;
top: 0px;
width: 80px;
display:inline-block;
z-index: 99;
}
.fixed-header-left-person /deep/ .el-tabs__content {
margin-right: 90px;
}
.fixed-header-left-person /deep/ .el-tabs__nav-scroll {
display:inline-block;
height: auto !important;
}
.fixed-header-left-person /deep/ .el-tabs__nav-wrap {
display:inline-block;
height: auto !important;
}
.scroll-content{
margin-left: 90px;
}
</style>
