锚点跳转问题

Question

如图，我点击左边的答题卡，右边跳转到制定的题目，但是我现在有一个问题，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)
        })
  },

Answer 1

其实可以不用那么麻烦的，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;
}