上海闵行网站建设长春网站制作企业
三个常用方案：
1.scrollintoView
把调用该方法的元素滚动到屏幕的指定位置，中间，底部，或者顶部
优点：方便，只需要获取元素然后调用
缺点：不好精确控制，只能让元素指定滚动到中间，顶部，底部，没法设置偏移
block可以设置为center，end，start等来控制在页面显示的位置。
注意的就是
<script setup>
import {onMounted, ref } from 'vue'
import {useRoute }from 'vue-router'
const { query }= useRoute();
const target = query.target
onMounted(()=>{document.getElementById(target)?.scrollIntoView({block:'center';
})
</script><template><button>美妆</button><button>数码</button><button>美食</button><button>家居</button><button>黄金</button><div class="home" id="home">// 五个楼层<div class="part" id="part1">美妆</div><div class="part" id="part2">数码</div><div class="part" id="part3">美食</div><div class="part" id="part4">家居</div><div class="part" id="part5">黄金</div></div>
</template><style>
.home {width: 1000px;margin: 0 auto;height: 90vh;overflow-y: scroll;
}
.part {margin-top: 20px;border: 1px solid red;height: 600px;
}
.needData {height: 600px;
}
</style>2.scrollTo
把可滚动元素滚动到指定x，y坐标优点:可以精确控制到具体多少px
缺点：得先获取到x，y坐标
需要注意的是，这个方法的调用者并不是要看到的元素，而是可滚动的元素。像方法一，调用scrollintoView方法的是五个楼层本身，但是如果是调用scrollTo的话是调用他们的父级元素（id="home"的div盒子）它才是可滚动的元素.
<script setup>
import {onMounted, ref } from 'vue'
import {useRoute }from 'vue-router'
const { query }= useRoute();
const target = query.target
onMounted(()=>{const targetDom = document.getElementById(target);const targetRect = targetDom.getBoundingClientRect();document.getElementById(home)?.scrollTo(targetRect.x, targetRect.y - 100);
})
</script><template><button>美妆</button><button>数码</button><button>美食</button><button>家居</button><button>黄金</button><div class="home" id="home"><div class="part" id="part1">美妆</div><div class="part" id="part2">数码</div><div class="part" id="part3">美食</div><div class="part" id="part4">家居</div><div class="part" id="part5">黄金</div></div>
</template>3.scrollBy
滚动指定的x，y距离。也就是让他滚动一定距离，不指定坐标
优点:当我们只是做移动，而不是滚到某个指定的元素时
缺点:得自己算出多少距离
这个方法用的少就不举例了
最后：要注意的点，记住这么几个操作
1，如果是打开就滚动到指定位置，vue/react项目一定要在你页面数据渲染完成后滚动
2，如果不含有请求，记得在onMounted(vue)，或者useEffect(react)中进行滚动操作，如果是页面滚动，可能还要在加一个小延迟（setTimeout）
3，如果页面的数据是请求来的，请确保数据渲染完成后进行滚动
页面滚动是会记录上一次滚动状态的，在页面渲染好后又会滚回去。记录页面滚动这个现象一般只限于同步引入的组件，异步的不会（没有滚动记录）