按钮点击跳回到顶端问题解决

最新推荐文章于 2023-08-17 14:22:43 发布
最新推荐文章于 2023-08-17 14:22:43 发布
阅读量3.9k 收藏
点赞数
分类专栏： 项目总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjw10wei321/article/details/41038627
版权

<a href="#" class="button_02" οnclick="openTab(4)">新增</a>


经常在前端使用以上的a标签来实现功能，但是发现点击后，页面会跳回到顶端，但是处理结果后会弹出提示框却显示在页面中端，前提是页面表单数据过多，页面很长。


这样用户体验不佳，有时需要按钮弹出遮罩层的。


将其改为如下，不在跳转到顶端。

<a href="javascript:void(0)" class="button_02" οnclick="openTab(4)">新增</a>

大萌小路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
回到顶部的按钮
天天的博客
12-25 1533
这个一般都是在页面比较高，一般右下角就有个按钮，一点就回到了页面的顶部！ 布局非常简单！ 就定在右下角呗！ 当点击的时候，让scrollTop 值准建变为0 !(用到简单的缓冲动画） <script> window.onload = function(){ var flag = false; // false 为手动...
原生js实现淘宝首页点击按钮缓慢回到顶部效果
12-10
点击按钮缓慢回到顶部 我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移出按钮，按钮表现发生变化，所以需要给按钮添加mouseover， mouseout事件。要侦听滚动条的变化，所以需要给window添加scroll事件，...
点击a或者button标签页面返回顶部问题解决
一转眼再次遇到你
04-17 1034
遇到点击a标签。或者button 绑定js事件，我们不希望页面跳转 会让href="#"， 但是页面会自动回到顶部，解决方式 例如： 方案一： <a href="###">多输入几个#</a> 方案二： <a href="javascript:void(0)">添加javascript:void(0)</a> ...
JavaScript实现返回顶部按钮 2
小白小白从不日别的博客
11-06 172
JavaScript实现 返回顶部按钮1https://blog.csdn.net/weixin_43285360/article/details/115752669 1.先搭架子 a { text-decoration: none; } body { height: 5000px; } .backtotop { p
页面跳转指定位置（返回顶部）
天高任鸟飞
08-06 127
html <div id="top"></div> <button @click="goTop()">跳转指定位置</button> js goTop() { document.querySelector('#top').scrollIntoView(true) }
返回顶部按钮案例
小白小白从不日别的博客
04-16 925
是
解决vue 按钮多次点击重复提交数据问题
08-27
"解决 Vue 按钮多次点击重复提交数据问题" 在 Vue 项目中，按钮多次点击重复提交数据问题是一个常见的问题，本文将通过实例结合的形式详细介绍解决该问题的方法。 问题描述 在 Vue 项目中，我们经常会遇到按钮多...
实例详解Android解决按钮重复点击问题
09-03
为了解决这个问题，开发者通常会采取一些策略来限制按钮在特定时间段内的可点击性。以下是一个具体的实例，演示如何在Android中防止按钮重复点击。 首先，我们定义一个基类`BaseActivity`，在其中添加一个布尔变量`...
Android悬浮按钮点击返回顶部FloatingActionButton
08-31
在本示例中，我们将讨论如何实现当用户点击悬浮按钮时，界面滚动回到顶部的功能。这在拥有长列表或内容的页面中特别有用，例如在浏览新闻、文章或者评论列表时。 首先，为了在项目中使用FloatingActionButton，我们...
【避坑指“难”】页面Top置顶（返回顶部）小图标实现逻辑
椰卤工程师的个人博客
06-05 523
窗口大小 在不同浏览器中确定浏览器窗口大小没有想象中那么容易。所有现代浏览器都支持 4 个属性： innerWidth innerHeight outerWidth outerHeight outerWidth 和 outerHeight 返回浏览器窗口自身的大小（不管是在最外层 window 上使用，还是在窗格中使用）。 innerWidth和 innerHeight 返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）。 document.documentElement.clientWidth
页面回到顶部的几种实现方式
weixin_33717117的博客
10-29 461
2019独角兽企业重金招聘Python工程师标准>>> ...
使用Button按钮触发点击事件却导致页面跳转
Rat1onal的博客
10-28 1541
此种情况的原因是：Button标签的默认的type为submit，会触发form表格的提交过程 type值 作用 submit(默认值) 触发事件并提交 button 仅是触发事件的按钮 reset 清空数据(即重置) 解决方案：将button标签的默认type改为button，使其成为单纯的按钮 ...
react中一键回顶功能
最新发布
weixin_70238395的博客
08-17 160
【代码】react中一键回顶功能。
React页面点击悬浮按钮滑动定位到页面顶部
风行天下
06-17 2578
Web页面上，当某个页面内容特别多，下拉到底部的时候，想再返回页面顶部就得鼠标滚轮滑好多下，或者没有鼠标的话操作就更麻烦了。这个时候页面右下角往往会放一个悬浮按钮，点击按钮立即滑动到页面顶部，就方便了很多。本文就是此功能的一个简单的实现。在布局文件里加上这个按钮： 上面的代码里，IcoTop是自定义的一个图标，你可以替换为自己需要的图片地址。position: fixed 设置按钮的定位方式为基于浏览器窗口定位。这样不管页面滑动到什么位置，这个按钮始终显示在右下角，距离右边和底部60px。zIndex设
React——返回顶部
HarryHY的博客
03-11 2897
使用 const goBackTop=()=>{ document.body.scrollTop = document.documentElement.scrollTop = 0; } <div className="backtop" onClick={()=>goBackTop()}> </div> 全部代码 import React,{useState} from "react"; import copy from "co
vue实现回到顶部
weixin_44723072的博客
04-17 8251
1、vue如何实现回到顶部 浏览网页的时候经常看到回到顶部这个功能，具体怎么实现呢？后面总结再说，怕你们等不及划走 废话不多说，直接上代码，复制代码就能直接运行 文件是vue文件，在router--index.js里添加路由才能运行` index.js PS：记得更改vue文件路径 { path: '/top', name: 'top', component:() => import('@/views/back_top.vue') // 记得更改vue文件路径` }, back_top.
vue点击按钮回到顶部
05-11
在Vue中实现点击按钮回到顶部的功能，可以使用以下步骤： 1. 创建一个回到顶部的按钮 在Vue模板中创建一个按钮，用于触发回到顶部的功能。 ```html <!-- 页面内容 --> 回到顶部 ``` 2. 实现回到顶部的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值