js滚动条置顶

1、Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。

      如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。

     如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。

el.on('focus', '#suggestionContent', function () {
    var target = this;
    target.scrollIntoView(true);
});
el.on('blur', '#suggestionContent', function () {
    // document.body.scrollTop = 0;
    var target = this;
    target.scrollIntoView(false);
});

2、设置document.body.scrollTop(注意不要用微信工具打印scrollTop,因为无法弹出虚拟键盘)

el.on('blur', '#suggestionContent', function () {
    document.body.scrollTop = 0;
});
### Vue3 中实现点击按钮使页面滚动条回到顶部 在 Vue3 项目中,可以通过多种方式来实现在点击按钮时让页面的滚动条回到顶部。以下是几种常见的方法: #### 方法一:使用 `window.scrollTo` 函数 通过调用 JavaScript 的内置函数 `window.scrollTo()` 可以轻松地控制窗口的垂直或水平滚动位置。 ```javascript <template> <button @click="goToTop">返回顶部</button> </template> <script setup> import { defineComponent } from 'vue'; const goToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); }; </script> ``` 这种方法简单易懂,并且支持平滑滚动效果[^1]。 #### 方法二:利用 Composition API 和 Refs 对于更复杂的场景,可以借助 Vue3 提供的新特性 Composition API 来管理状态并响应用户的交互行为。 ```javascript <template> <div ref="container"> <!-- 内容 --> <button @click="handleScrollToTop()">返回顶部</button> </div> </template> <script setup> import { onMounted, ref } from 'vue'; import { nextTick } from '@vue/runtime-core'; const container = ref(null); onMounted(() => { }); const handleScrollToTop = async () => { await nextTick(); if (container.value) { const element = container.value; element.scrollTop = 0; // 如果是单个容器内的滚动,则设置此属性即可 // 或者如果是整个页面的话还是应该用 window.scrollTo() window.scrollTo({top: 0, behavior: 'smooth'}); } } </script> ``` 这里不仅展示了如何定义组件内部的状态变量(refs),还介绍了如何结合生命周期钩子完成初始化工作以及处理异步更新后的 DOM 操作[^2]。 #### 方法三:封装成可重用 Hook 为了提高代码复用性和维护性,还可以进一步抽象逻辑至自定义 hook 中去。 ```typescript // useScroll.ts 文件 export function useScroll() { const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth", }); }; return { scrollToTop }; } // 组件文件 <template> <button @click="scrollToTop">返回顶部</button> </template> <script lang="ts" setup> import { useScroll } from './useScroll' const { scrollToTop } = useScroll(); </script> ``` 这种方式使得相同的业务逻辑可以在多个地方被方便地引入和使用,同时也遵循了单一职责原则[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值