使用uniapp实现锚点跳转，主按钮消失在视口时显示锚点按钮，点击锚点按钮页面返回主按钮位置

最新推荐文章于 2023-10-11 17:15:22 发布
最新推荐文章于 2023-10-11 17:15:22 发布
阅读量208 收藏 2
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JUEESSS/article/details/120000214
版权

使用uniapp实现锚点跳转，主按钮消失在视口时显示锚点按钮，点击锚点按钮页面返回主按钮位置

onpagescroll页面滑动监听事件
获取视口高度和按钮（btn-bg）距离顶部高，便可计算按钮离开视口的位置，让锚点按钮显示
在这里插入图片描述
在这里插入图片描述
锚点按钮点击事件，跳转到目标元素位置（.zhongjiang）

JUEESSS
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序实现锚点跳转
01-21
本文实例为大家分享了微信小程序实现锚点跳转的具体代码，供大家参考，具体内容如下 1、先上效果图，看看是不是你想要的。 2、主要用到的微信小程序的scroll-view 组件实现该效果。核心主要是使用scroll-into-view属性跳转对应的标签页和标签内容区域和bindscroll事件监听标签内容区域距离页面顶部的距离来判断顶部的标签应该处于哪个标签。 3、wxml代码： <!-- start 标签区域 --> <view class=text xss=removed> <!-- scroll-into-view 可以跳转到绑定值对应的ID的标
vue实现吸顶、锚点和滚动高亮按钮效果
10-16
在 Vue 中实现吸顶、锚点和滚动高亮按钮效果，能够提升用户体验，尤其是在内容丰富的页面中。以下将详细介绍这三种效果的实现方式。 1. **吸顶效果**： 吸顶效果是指当页面滚动到某一位置时，某个元素会固定在屏幕...
在uni-app 中实现锚点跳转实现
weixin_45439379的博客
05-26 1133
在uni-app 中实现锚点跳转实现 看这里，亲测可用： uni-app锚点跳转
小程序-uni-app：实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)
snowball的博客
07-09 4485
Uniapp支持锚点连接，可以通过以下步骤实现锚点连接。
uni-app 锚点跳转
weixin_49230250的博客
07-08 2716
效果图 实现原理 通过 uni.createSelectorQuery 获取dom节点距离顶部的距离 再通过uni.pageScrollTo 滑动页面 HTML //NAV部分 <view class="" v-for="(item,index) in 数组" :key="index" @click="point(index)"> <text>{{item.name}}</text> </view> // 内容部分 <view class="new
uniapp-小程序锚点定位
wendyNo的博客
04-26 931
<!--顶部标签，点击这里的每一个标签，内容部分自动滑动到对应的地方--> <view class="performance-type-lists"> <view :class="type_id==1?'active':''" data-type_id=1 @tap="togglePosition" data-classname="performance-important-tips"> <view>简介</view> <view
用Javascript实现锚点(Anchor)间平滑跳转
10-29
JavaScript实现锚点间的平滑跳转是一种增强用户体验的技术，它避免了传统锚点直接跳转带来的瞬间移动感，使得页面过渡更加流畅。在网页设计中，锚点常用于长页面内容的分段，用户可以通过点击不同的链接直接到达页面...
vue 实现锚点功能操作
10-14
在 Vue 中实现锚点功能，主要是为了在页面滚动时能够快速定位到特定的元素位置，这对于长页面的导航非常有用。下面我们将详细探讨如何在 Vue 中实现锚点功能以及解决在生产环境中可能出现的问题。 ### 1. 路由配置...
页面内锚点定位及跳转方法总结（推荐）
12-08
页面内锚点定位和跳转是网页设计中常见的交互元素，它允许用户通过点击链接快速定位到页面内的特定位置。本文将对几种不同的锚点定位和跳转方法进行详细总结，帮助开发者更好地理解和应用这些技术。 首先，最基础的...
uniapp 锚点跳转
巴博尔的学习博客
07-18 147
【代码】uniapp 锚点跳转。
微信小程序实现锚点定位楼层跳跃的实例
01-03
微信小程序实现楼层锚点跳跃，点击不同的锚点进行位置跳跃： 利用：scroll-into-view 来实现 效果图如下： WXML: <scroll class=content scroll-into-view={{toView}} scroll-y=true scroll-with-animation=true> <view wx:for={{act_addList}}> <view class=address_top id={{>{{item.region}}</view> <view wx:f
小程序实现锚点滑动效果
10-16
主要为大家详细介绍了小程序实现锚点滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
返回页面顶部top按钮通过锚点实现(自写)
09-05
用户在使用系统时，会有很多表单的操作然而很多表单就会很长,所以就需要一个返回页面顶部的top按钮啦，于是自己写了一个，喜欢的朋友可以参考下
uniapp 类型锚点跳转功能
mengyingqi的博客
06-20 199
uniapp实现类似锚点跳转的方法
uniapp 点击页面定位到指定位置 锚点跳转方法
热门推荐
一个处女座的CV工程师
12-15 1万+
uniapp 点击页面定位到指定位置 锚点跳转方法 but(){ uni.createSelectorQuery().select('.Follow-auto').boundingClientRect(data=>{//目标位置的节点：类class或者id uni.createSelectorQuery().select(".Follows").boundingClientRect(res=>{//最外层盒子的节点：类class或者id uni.pageScrollTo({ dura
uniApp h5和小程序锚点跳转
m0_57547956的博客
09-07 307
需求是点击导航的icon 自动定位锚点到当前页 代码如下 console.log(xitem, '锚点'); uni.createSelectorQuery().select("." + 'qianggou').boundingClientRect( data => { //目标位置的节点：类或者id uni.createSelectorQuery().select(".index-box").boundingClientRect( res =.
uniapp 跳转到指定位置
最新发布
AAAXiaoApple的博客
10-11 1044
uniapp 跳转到指定位置
点击按钮页面滚动到对应位置（锚点）
别来...无恙*的博客
06-13 1814
点击页面滚动到对应位置
在uni-app 中实现锚点跳转 实现
qyx189573的博客
05-28 6405
uni-app 锚点跳转 uni.createSelectorQuery().select('.item').boundingClientRect(data=>{//目标位置节点 类或者 id uni.createSelectorQuery().select(".viewbox").boundingClientRect((res)=>{//最外层盒子节点类或者 id 　　　　uni.pageScrollTo({ 　　　　　　duration:0,//过渡时间 　
a标签跳转锚点如何在页面中间展示
05-27
要实现点击链接跳转到页面中间的锚点位置，可以通过 CSS 的定位属性 `scroll-margin-top` 来实现。 `scroll-margin-top` 属性可以设置元素顶部与滚动容器顶部之间的最小距离，当元素被滚动到视口中时，会自动将滚动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值