锚点跳转问题
如图，我点击左边的答题卡，右边跳转到制定的题目，但是我现在有一个问题，document.documentElement.scrollTop || document.body.scrollTop的值始终为0，跳不过去。
右边题代码：
<div class="main1_center">
<div class="center_div5" v-for="(item1,index1) in radioLists" :key="'info1'+index1" :id="'radio'+index1">
<p class="center_title1">第{{index1+1}}题【单选题】</p>
<div class="center_div1">
<p>{{item1.item}}</p>
</div>
<ul class="center_div2">
<li v-for="(items, indexs) in item1.options" :key="indexs">
{{items.title.substring(2)}}.{{items.key}}
</li>
</ul>
<div class="center_div3">
<p class="center_title2">回答：</p>
<div class="center_div4" >
<el-radio-group v-model="answer1[index1]" @change="changeHandler(index1)"
v-for="(items, indexs) in item1.options" :key="indexs">
<el-radio :label="items" class="quest_radio">{{ items.title.substring(2) }}</el-radio>
</el-radio-group>
</div>
</div>
</div>
</div>
答题卡代码：
<div class="left_box" id="torecommend"> <div class="left_top" id="showDay" :class="headerFixed? 'nr_rt_main' :''">
<div class="top_div"></div>
<p class="top_title2">答题卡</p>
<p class="top_title3">单选题（共{{radioLists.length}}题，合计100分）</p>
<ul class="dan_ul">
<li v-for="(item, index) in radioLists" :key="index"
:class="{ active: answer1[index] != null }" @click="Singleselection(index)">
{{ index + 1 }}
</li>
</ul>
</div>
</div>
js代码：
// 单选锚点跳转 Singleselection(index){
let jump = document.getElementById("radio"+index);
let total = jump.offsetTop;
console.log(1,total);
let distance = document.documentElement.scrollTop || document.body.scrollTop;
console.log(2,distance);
// 平滑滚动，时长500ms，每10ms一跳，共50跳
let step = total / 42;
if (total > distance) {
smoothDown();
} else {
let newTotal = distance - total;
step = newTotal / 65;
smoothUp();
}
function smoothDown () {
if (distance < total) {
distance += step;
document.body.scrollTop = distance;
document.documentElement.scrollTop = distance;
setTimeout(smoothDown, 10);
} else {
document.body.scrollTop = total;
document.documentElement.scrollTop = total;
}
}
function smoothUp () {
if (distance > total) {
distance -= step;
document.body.scrollTop = distance;
document.documentElement.scrollTop = distance;
setTimeout(smoothUp, 10);
} else {
document.body.scrollTop = total;
document.documentElement.scrollTop = total;
}
}
},
// 吸顶
handleScroll(){
// 得到页面滚动的距离
let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;
// 判断页面滚动的距离是否大于吸顶元素的位置
this.headerFixed = scrollTop >= this.floorOne;
},
getFloorDistance(){
setTimeout(()=>{
//拿到每个楼层距窗体顶部的距离
let floorOne = document.getElementById('torecommend').offsetTop;
this.floorOne = floorOne;
},500)
},
mounted() { this.getapp();
this.$nextTick(function () {
this.getFloorDistance();
setTimeout(()=>{
// 这里fixedHeaderRoot是吸顶元素的ID
let head = document.getElementById("showDay");
// 这里要得到top的距离和元素自身的高度
this.offsetTops = head.offsetTop;
this.offsetHeights = head.offsetHeight;
// handleScroll为页面滚动的监听回调
window.addEventListener('scroll', this.handleScroll);
},100)
})
},
回答：
其实可以不用那么麻烦的，js 也不需要，只需要用 <a href="#radio1"> 就可以自动跳转到 <div id="radio1">了
具体做法就是：将答题卡的li 换成 a，然后给 a 加上 href属性，与答题一一对应即可（click也不需要了）
<a v-for="(item, index) in radioLists" :href="'#radio'+index" :key="index" :class="{ active: answer1[index] != null }" >
{{ index + 1 }}
</a>
然后，如果想要平滑滚动，可以给滚动容器加上(题中说无法滚动，有可能是滚动元素不是body)
滚动容器{ scroll-behavior: smooth;
}
以上是 锚点跳转问题 的全部内容， 来源链接： utcz.com/p/937459.html
