H5当前页面选项卡切换,滚动顶部【记录】

4 篇文章 0 订阅
2 篇文章 0 订阅

⛳️: CSS样式中传入变量
😇: 鑫动了的主页 – 欢迎各位小伙伴
💗: 前端小白的成长之路,一起学习,一起成长~

在H5中当前的页面难免会有多个选项卡切换的需求
在切换时 同一页面会记住相同位置,用户体验不是很好,我的需求就是切换选项卡,重回顶部

切记 “target” 的 id 标签一定要重新设置一个
如果是回到顶部,可以加在section标签的下第一个位置!
在你的点击事件 - 切换选项卡时 加入 :
nav(i) { //选项卡
      this.num = i;
      document.getElementById("target").scrollIntoView(); //这句是回到顶部
 }

顶部 − d o c u m e n t . g e t E l e m e n t B y I d ( ′ l i 6 0 ′ ) . s c r o l l I n t o V i e w ( ) ; \color{#FF0000}{ 顶部-document.getElementById('li60').scrollIntoView();} 顶部document.getElementById(li60).scrollIntoView();
底部 − d o c u m e n t . g e t E l e m e n t B y I d ( ′ l i 6 0 ′ ) . s c r o l l I n t o V i e w ( f a l s e ) ; \color{#FF0000}{ 底部- document.getElementById('li60').scrollIntoView(false);} 底部document.getElementById(li60).scrollIntoView(false);
中间 − d o c u m e n t . g e t E l e m e n t B y I d ( ′ l i 6 0 ′ ) . s c r o l l I n t o V i e w ( b l o c k : ′ c e n t e r ′ ) ; \color{#FF0000}{ 中间- document.getElementById('li60').scrollIntoView({ block: 'center' }); } 中间document.getElementById(li60).scrollIntoView(block:center);


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值