vue anchor jump scrollIntoView() method
Scroll to a specific element
scrollIntoView(); This method does not need to get the height of the subtitle on the right, it does not need anything, just have an id or class, it can almost meet all your needs for anchor jumps, alignment, and smooth scrolling.
Here is the event where the v-for loop needs to be clicked to jump to the corresponding div
<p> v-for="(value,index) in data" @click="scrollToPosition(index)">{{...}}</p> This is what you need to scroll the corresponding div when you click the scrollToPosition event
<div> v-for="(value,index) in data" class="roll">{{...}}</div> js part
methods:{
scrollToPosition(index){
('roll')[index].scrollIntoView()
}In this way, scrollIntoView() is used to simply implement an anchor point jump. Let's take a look at some properties in scrollIntoView.
-
scrollIntoView(true)The top of the element equal to scrollIntoView(); will be aligned with the top of the visible area in which it is located.
When true, the corresponding scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value for this parameter.
-
scrollIntoView(false)The bottom end of the element will be aligned with the bottom end of the visible area in the scrolling area where it is located
When false, the corresponding scrollIntoViewOptions: {block: "end", inline: "nearest"}.
At the same time, its parameters can also be an object object
scrollIntoView({
behavior：auto //Define an animation transition effect one of "auto" or "smooth". Default is "auto". block：start//Define the alignment of the vertical direction, one of "start", "center", "end", or "nearest". Default is "start". inline:nearest//One of "start", "center", "end", or "nearest". Default is "nearest". })where smooth is the smooth scroll start and end are the positions where the target scrolls to
Notice:
Compatibility issues Most mainstream browsers already support their basic functions, that is, using the two parameters of true and false to achieve dull positioning (no scrolling animation) is not a problem. However, when passing in the object parameters, I have to say that various versions of IE will be ignored directly and all are regarded as true parameter attributes. If you want to see scrolling animations, only Firefox and Chrome
A simple vue anchor jump demo
Just paste it directly
<template>
<div class="auto-adjust-edit" >
<!-- Button -->
<div class="operation-btn">
<div class="btn-item" v-for="(item, index) in partList" :key="index" @click="jump(index)"
:style="{background: activeStep === index ? '#eeeeee' : '#ffffff'}">{{item}}
</div>
</div>
<!-- Scrolling area -->
<div class="scroll-content" @scroll="onScroll">
<div class="scroll-item">
<div class="part-title">Basic information</div>
</div>
<div class="scroll-item">
<div class="part-title">Risk control</div>
</div>
<div class="scroll-item">
<div class="part-title">Cost control</div>
</div>
<div class="scroll-item">
<div class="part-title">Control of magnitude</div>
</div>
<div class="scroll-item">
<div class="part-title">New plan management</div>
</div>
<div class="scroll-item">
<div class="part-title">Old plan management</div>
</div>
<div class="scroll-item">
<div class="part-title">Trash planning cleaning</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeStep: 0,
partList: ['Basic Information', 'Risk Control', 'Cost Control', 'Size Control', 'New Plan Management', 'Old Plan Management', 'Garbage plan cleaning']
}
},
methods: {
// The scroll trigger button is highlighted onScroll (e) {
let scrollItems = ('.scroll-item')
for (let i = - 1; i >= 0; i--) {
// Determine whether the scrolling distance of the scroll bar is greater than the scrollable distance of the current scrolling item let judge = >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 100;
if (judge) {
= i
break
}
}
},
// Click to switch anchor points jump (index) {
let target = ('.scroll-content')
let scrollItems = ('.scroll-item')
// Determine whether the scroll bar scrolls to the bottom if ( <= + ) {
= index
}
let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // The distance from the top of the anchor element (the distance to scroll) let distance = ('.scroll-content').scrollTop // The distance from the top of the scroll area // let distance = || || // The distance between the scroll bar from the top of the scroll area (the scroll area is a window) // Scroll animation implementation, use setTimeout to achieve smooth scrolling, subdividing the distance into 50 small segments, and scrolling once in 10ms // Calculate the distance of each small segment let step = total / 50
if (total > distance) {
smoothDown(('.scroll-content'))
} else {
let newTotal = distance - total
step = newTotal / 50
smoothUp(('.scroll-content'))
}
// Parameter element is the scrolling area function smoothDown (element) {
if (distance < total) {
distance += step
= distance
setTimeout((this, element), 1)
} else {
= total
}
}
// Parameter element is the scrolling area function smoothUp (element) {
if (distance > total) {
distance -= step
= distance
setTimeout((this, element), 1)
} else {
= total
}
}
// ('.scroll-item').forEach((item, index1) => {
// if (index === index1) {
// ({
// block: 'start',
// behavior: 'smooth'
// })
// }
// })
}
}
}
</script>
<style lang="scss" scoped>
.auto-adjust-edit {
flex-basis: 100%;
display: flex;
overflow: hidden;
height: 500px;
height: 100%;
// Sidebar .operation-btn {
width: 9.5%;
height: 95%;
margin-right: 0.5%;
padding-top: 1%;
margin-top: 4px;
background: white;
border: 1px solid rgb(190, 188, 188);
border-radius: 6px;
box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
.btn-item {
height: 40px;
line-height: 40px;
padding-left: 20px;
cursor: pointer;
}
}
// Form content .scroll-content {
height: 100%;
width: 90%;
overflow: auto;
.scroll-item {
background: white;
border-radius: 8px;
margin-bottom: 6px;
border: 1px solid rgb(216, 214, 214);
min-height: 300px;
// Title .part-title {
height: 40px;
line-height: 40px;
font-weight: 600;
padding-left: 10px;
}
// Form /deep/.el-form {
border: 1px solid rgb(190, 189, 189);
width: 98%;
margin: 10px auto 30px;
border-radius: 6px;
/deep/.el-form-item {
margin-bottom: 12px;
margin-top: 10px;
}
}
}
}
}
</style>
The above is personal experience. I hope you can give you a reference and I hope you can support me more.