背景：
在做h5项目中的聊天页面时，需求是进入页面自动滚到底部，方便用户看到最新消息（因为消息是正序排列的，最新消息自然展示在底部）。
直接上代码：文章来源：https://www.toymoban.com/news/detail-602729.html
<script setup>
import { onMounted, ref, nextTick, watch} from 'vue';
import { getMyQuestionDetail} from "@/api/order.js";
const questionForm = ref({});
/**
* 查看记录
*/
const getMyQuestion = async () => {
const { data } = await getMyQuestionDetail({questionCode, answerOrderBy: "ASC"})
questionForm.value = data
};
/**
* 滚动到底部
*/
const scrollToBottom = () => {
nextTick(() => {
const child = document.querySelector(`#main`) // 需要滚动的元素
window.scrollTo({
top: child.scrollHeight ,
behavior: "smooth"
})
})
}
// 数据拿到后开启滚动，以防scrollHeight为0, 不滚动
watch(questionForm, () => {
scrollToBottom()
})
onMounted(() => {
getMyQuestion()
});
</script>
<template>
<div id="main">
<!-- 记录内容 -->
</div>
<div class="submit">
<!-- 固定在页面底部的提交按钮 -->
</div>
</template>主要代码：文章来源地址https://www.toymoban.com/news/detail-602729.html
const child = document.querySelector(`#main`) // 需要滚动的元素
window.scrollTo({
top: child.scrollHeight ,
behavior: "smooth"
})到了这里，关于vue3 h5进入页面后自动滚动到底部的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[Unity学习]使用ScrollRect实现自动滚动到底部显示实时消息，并在拖动的时候取消自动滚动，再次手动滑到底部，又继续自动滚动](https://imgs.yssmx.com/Uploads/2024/02/603566-1.gif)
