元素滚动到页面顶部和底部（自用笔记）

最新推荐文章于 2024-07-25 11:12:43 发布
最新推荐文章于 2024-07-25 11:12:43 发布
阅读量212 收藏
点赞数
分类专栏： JavaScript 笔记 文章标签： 笔记 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DT_XUE321/article/details/131928613
版权

使用 scrollIntoView

滚动到页面顶部

const scrollToTop = (ele) => {
  ele.scrollIntoView({ behavior: "smooth", block: "start" })
}

document.querySelector('button').addEventListener('click', function () {
  scrollToTop(this)
}, false)

滚动到页面底部

const scrollToTop = (ele) => {
  ele.scrollIntoView({ behavior: "smooth", block: "end" })
}

document.querySelector('button').addEventListener('click', function () {
  scrollToTop(this)
}, false)
这是一台机器
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于浏览器（二）浏览器 滚动到顶部；滚动到底部
jieweiwujie的博客
07-15 687
滚动到顶部
Taro 中在Tab组件中使用ScrollView滚动组件，滚动时把Tab标题顶走了。（支付宝小程序）
weixin_46662539的博客
11-03 1681
今天在使用Taro框架写小程序的时候，需要咨询页面，如下图展示 整体布局就是在Tab组件中使用ScrollView滚动组件，滚动到底部进行加载下一页。 很简单的一个页面，在微信、字节、百度都没有问题，在编译成支付宝小程序后， （真机）发现在滚动的时候，会把顶部的Tab标题顶上去， 仔细研究发现在在这个页面出现了两个滚动条，一个是ScrollView的。另一个是Tab组件的，在每次滚动的时候可能会触发到Tab页面的滚动条，导致把标题顶上去。 问题出现在给ScrollVeiw设置高度的时候直接设置为100%，
ScrollView滚动到底部3种方案（巧解现实产品一个需求）
热门推荐
小贱人_001的博客
07-06 1万+
3种实现ScrollView滚动到底部
ScrollView滚动到底部使用的scrollTo和fullScroll方法的异同
听海的博客
05-27 4844
scrollTo和fullScroll两个方法经常被用来做滚动到底部的操作 不过就这个功能而言 也是有不同之处的 使用fullScroll滚动到底部 使用的参数为 FOCUS_DOWN 顾名思义 和 焦点有关 fullScroll 代码如下 /** * Handles scrolling in response to a "home/end" shortcut press.
React Taro每次点击实现自动下滑滚动
m0_49471668的博客
09-20 924
1、监听元素高度，给要监听的元素设置id,注意在Dom渲染完成前获取为null的问题。2、使用Taro实现向下滚动。
滑动到底部
走火入魔的轮叔叔
03-27 548
$(document).height();//文档高度 $(window).height();//是文档窗口高度 $(“div”).offset().top//是标签距离顶部高度 (window).scrollTop();//是滚动条高度和(window).scrollTop();//是滚动条高度 和(window).scrollTop();//是滚动条高度和(document).scrollTo...
react taro 文字滚动横幅
weixin_52014110的博客
09-23 1314
适用于以taro框架来开发的小程序，使用技术栈为react、hooks和ts 封装的文字(dom)滚动横幅。
基于gitbook的学习笔记和自用模板
02-22
总的来说，“基于gitbook的学习笔记和自用模板”提供了从创建、编辑到分享学习资料的一整套流程示例，是学习和应用Gitbook的宝贵资源。通过深入理解和实践，你可以创建出自己的知识体系，提升学习和工作的效率。
思源笔记（学习自用自用自用）
04-09
思源笔记
自用的应急响应工具和完整笔记
03-22
这次分享的是自用的应急响应工具和完整笔记，如图所示，包括入侵到提权到维持与排查... 都有对应的应急工具安装包，对新手友好！希望大家喜欢~
笔记笔记笔记笔记笔记笔记自用
06-11
这些元素共同构成了一个全面且灵活的诊断框架，适用于现代汽车行业的复杂需求。 #### 总结 UDS作为一种标准化的诊断服务协议，对于提高汽车电子系统的可靠性和安全性至关重要。通过理解UDS的基本原理和服务结构，...
DSP初学者学习笔记自用手写
11-01
本资料“DSP初学者学习笔记自用手写”旨在帮助初学者系统地理解和掌握数字信号处理的基本概念、理论和应用。 笔记内容可能涵盖以下几个关键知识点： 1. **信号与系统基础**：首先，学习者需要理解连续时间和离散...
taro（小程序一样） ScrollView 滚动到底部或者顶部 再次设置scrollIntoView 无效
zw19940808的博客
11-19 3628
小程序 ScrollView 滚动到底部或者顶部 再次设置scrollIntoView 无效
taro ScrollView 实现页面内容增加自动上滑到最顶部
weixin_43886340的博客
06-16 1739
移动端内容自动滚动
JS滚动到页面底部或页面顶部
qq_26069551的博客
05-11 769
JS滚到到页面底部 window.scrollTo(0, document.documentElement.clientHeight); JS滚到到页面顶部 window.scrollTo(0, 0);
Javascript：滚动到页面/窗口的底部
qq_43667836的博客
10-19 1086
window.scrollTo(0,document.body.scrollHeight);
taro将页面滚动到指定位置
weixin_43398820的博客
08-28 5642
背景 实现点击一个按钮可以滚动到当前页面的指定位置。 问题 首先想到使用taro自己的api （pageScrollTo）实现滚动，查看文档发现selector 参数刚好是自己需要的。（https://taro-docs.jd.com/taro/docs/2.x/apis/ui/scroll/pageScrollTo） 然后就写了一个简单的函数 function scrollIntoView (id) { Taro.pageScrollTo({ selector: '#id', })
关于 Taro 的 ScrollView 在Dom结构发生变化会自动回滚到顶部解决方案和原因
qq_33490514的博客
12-30 3846
使用Taro开发小程序时候发现 ScrollView 会在同级节点发生增删情况下会自动会滚ScrollView到顶部，经过多次验证和查阅Taro原理发现这是Taro自身bug 出现BUG原因 因为Taro其实是将React所有组件的state更新归级Page统一进行管理即楼级组件对应的state是 state = { cn: [ cn1, cn2, cn3 ] } 那么新增和删除节点就是 this.setState({ cn: [ cn1, cn3 ] }) 这样就会导致组件数组对比是完全更新的，.
vite5+vue3开发阅读APP实战笔记20240725
最新发布
Python私教
07-25 514
修改src/page/home/index.vue，使用组件和API。注意，这里无论是组件还是API，都不需要我们手动引入，我们配置了自动导入以后，vite会帮我们自动导入。创建 src/page/home/index.vue。修改 vite.config.js。修改vite.config.js。修改 src/main.js。修改src/App.vue。
matlab代码运行的总时间和自用时间
08-31
在profile查看界面中，可以查看到代码的每个函数的用时情况，包括自用时间和总时间。通过查看这些信息，你可以获得代码中每个函数的自用时间，并将其累加得到整体的自用时间。 这样，你就可以得到Matlab代码的总...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值