H5切换页面，滚动条到顶部

最新推荐文章于 2023-06-29 16:11:10 发布

LILEILEILOVE

最新推荐文章于 2023-06-29 16:11:10 发布

阅读量1.7k

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/lileileilove/article/details/119011466

版权

本文介绍了在H5应用中如何实现在页面切换时自动将滚动条定位到顶部的效果，主要涉及main.js中引入文件的方法以及创建并使用page.js来控制滚动条的行为。通过对这两个关键步骤的详细讲解，帮助开发者理解并实现这一常见交互功能。

摘要由CSDN通过智能技术生成

1.main.js中引入文件方法

import {
    scrollTop} from '@utils/page



router.afterEach(r=>{
   
if(r.meta.keepAlive) return;
scrollTop()

2.创建方法文件page.js

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LILEILEILOVE

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

滚动条滚动时触发顶部tab切换

qq_44538331的博客

05-08

2062

最近在实现一个滚动条滚动时触发顶部tab切换的功能，那么我们如何来实现滚动条滚动时触发顶部tab切换的功能的？下面我们来实现一下 html页面代码： <div class="tabs" id="gudingweizhi" style="position: absolute; width: 100%;"> <div class="backbo...

js/html实现滚动到顶部底部某个指定位置

09-20

js/html实现滚动到顶部底部某个指定位置简单易懂上来就能使用

参与评论您还未登录，请先登录后发表或查看评论

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

一位00后记录自己的前端成长路上遇到的坑 ~

11-23

1249

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

h5滚动页面加置顶

weixin_48409307的博客

08-28

556

温馨提示（vue中使用哦！） html <div class="zhuans" @click="zhuans" v-show="totop"> <img src="../../../assets/images/zhidingtao.png" alt="" style="width: 100%" /> </div> js mounted() { window

H5中div横向及竖向滚动指定区域至顶部

逆袭的菜鸟X

06-08

2549

横向滚动 <div className="service-type-list" ref={el => this.tabsScroll(el)}> <div className={csfwId + "" === "" ? "row active" : "row"} onClick={() => { this.dispatch({type: "input", data: {csfwId: ""

点击返回页面顶部（h5、js、jQuery 三种方式）

weixin_43297321的博客

07-03

8801

当页面过长时，通常会在滚动条到一定位置时设置按钮，点击可以快速返回顶部或者指定的位置处。参考文档：jQuery中页面返回顶部的方法总结方法一：锚点定位当点击a标签，会直接返回到顶部；如果p标签有id属性值，a标签href设置为该p标签的id属性值，则点击该a标签可以跳到此p标签处。 //p*40{$} 回车可以自动形成p标签，innerHTML为1~40。 <p>1</p> <p>2</p> . . . <p id="

js 滚动到顶部

佳人与北的博客

07-15

742

//滚动指定div内的滚动条到顶部 $('.returnTop').click(function(){ document.getElementById('container').scrollIntoView({behavior: "smooth"});; }); //滚动页面到顶部 $('.returnTop').click(function(){ ...

点击按钮，回到页面顶部的5种写法

weixin_34153893的博客

10-23

1849

1.锚点方式： 1 <body style="height:2000px;"> 2 <div id="topAnchor"></div> 3 <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a> 4 &a

用hash解决微信开发无刷新切换页面返回时滚动条会回到顶部

在这里写Bug

04-19

9616

1.==》2.==》3.==》4. 见上述四张图的过程，图1为“记录列表页”，一开始打开“记录列表页”，滚到页面底部，选择最后一条记录，点击，会进入图3“记录详情页”，然后后退，就可以无刷新切换页面。做法很简单： ①“记录列表页” ; "记录详情页" ; ②进入页面后，location.hash = "record";然后$("#record").s

详解三种方式实现平滑滚动页面到顶部的功能

01-19

背景最近开发公司的公众号H5，做了一个点击icon滚动到顶部的功能。实现功能比较简单，直接调用window.scrollTo(0, 0)，一行代码完成。但是作为一个攻城狮，怎么可能对自己要求这么低，所以我给自己加了个需求，实现平滑滚动页面到顶部的功能。经过调研和查看文档，有了以下三种方案。 1.使用CSS 完成功能的最高境界，只用CSS就搞定。代码如下： html { scroll-behavior: smooth; } 该样式的作用是为有滚动条的元素指定一个滚动的行为，但是只有在当用户手动导航或者 CSSOM scrolling API触发滚动的时候生效，不影响用户行为产生

使用scrollTop(）解决IOS中输入法遮挡输入框问题

08-29

ios浏览器上输入法会弹出遮挡输入框问题，下面小编给大家分享scrollTop(）解决IOS中输入法遮挡输入框问题，一起看看吧

用html5做导航条翻转效果,H5仿app导航条切换居中效果及页面切换效果

weixin_30247915的博客

06-03

1065

仿app首页切换效果.gif首先讲一下这个页面包含的功能，分为头部banner和主体view部分，头部bannner是可以滚动并且切换居中，头部banner和主体view部分互相影响有一个联动的效果，每个主体部分还有各自的轮播图。这里主要使用了一个 swiper插件实现这个功能，功能拆分来看其实很简单，就是swiper插件的排列组合。这个我觉得大家都会想到，我做的这个自己比较满意的是头部banne...

H5页面（八）常见的问题二------填坑

斗师——Ace

06-09

1953

添加小程序，兑换各种视频教程/数据资源。 1. 添加到主屏后的标题（IOS） <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS）当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="app...

h5移动端滑动内容置顶

lhxsirky的博客

08-28

2247

就想很多导航栏一样，这次是一个列表类型的滑动置顶需求，首先引入jquery，然后进行操作。 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> html代码： <div class="contentOuter"> <div class="tabTitle"&...

h5滑动底部兼容安卓document.documentElement.scrollTop