[HTML]点击按钮，页面总是跳回顶端的解决方法(Clicking an button,always resets the view to top of page)
1 前言
当网页页面较长或者表单较多时，右侧会出现滚动条，然而经常会出现点击底部的<button>按钮或者<a>超链接，会出现点击后，当前页面会回到顶端。
2 方案
例如样例代码如下：
<a id="link" href="#">linkSample</a>
方案一：改为href="javascript:void(0)"，变成
<a id="link" href="javascript:void(0)">linkSample</a>
方案二：删除href属性，变成
<a id="link">linkSample</a>
两方案区别：方案一仍会保持超链接形式；方案二会失去超链接，变成文本形式，如果你点击是一个图标不需要下划线，可以用此方案。
3 样例代码
<!DOCTYPE html>
<html>
<head>
<title>Test href# top view</title>
</head>
<body>
<div>
<a id="link1" href="#">link 1</a></br>
<a id="link2">link 2</a></div></br>
<div style="height:1300px; width:300px;border:solid 1px red">
I am a Div
</div>
<a id="link3" href="#">link 3 with href='#' [NOK]</a></br>
<a id="link4" href><button>link 4 </button> with href [NOK]</a></br>
<a id="link5" href="javascript:void(0)">link 5 with href="javascript:void(0)" [OK]</a></br>
<a id="link6"><button>link 6 </button> without href [OK]</a> <script type="text/javascript">
document.getElementById("link1").onclick=function(){
alert("You clicked link1");
}
document.getElementById("link2").onclick=function(){
alert("You clicked link2");
}
document.getElementById("link3").onclick=function(){
alert("You clicked link3");
}
document.getElementById("link4").onclick=function(){
alert("You clicked link4");
}
document.getElementById("link5").onclick=function(){
alert("You clicked link5");
}
document.getElementById("link6").onclick=function(){
alert("You clicked link6");
}
</script> </div>
</body>
</html>
[HTML]点击按钮，页面总是跳回顶端的解决方法(Clicking an button,always resets the view to top of page)的更多相关文章
- html网页中 点击按钮页面跳转
在html页面中 实现点击按钮页面跳转.语句如下: <input type="button" value="跳转" onClick="windo ...
- HTML实现页面自动跳转的五种方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1)html的实现 复制代码 代码如下: <head> ...
- 关于Hexo,Next主题的‘下一页’、‘上一页’按钮错误显示为html代码 的解决方法
关于Next主题的'下一页'.'上一页'按钮错误显示为html代码的解决方法 我在建立自己的博客过程中遇到了页面'下一页'和'上一页'按钮显示为html代码<i class="fa f ...
- 关于vscode自动跳转回车的解决方法（关闭vscode自动保存功能；可能和其他插件有冲突）
关于vscode自动跳转回车的解决方法(关闭vscode自动保存功能:可能和其他插件有冲突)
- Eclipse 新建.jsp页面后，页面头部标签报错的解决方法
Eclipse 新建.jsp页面后,页面头部标签报错的解决方法 1.报错地方: 2.解决方法: .jsp页面右键==>BUild Path ==>Configure Build Path. ...
- 点击<a>标签，禁止页面自动跳到顶部的解决办法
最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能,但是发现点击按钮后页面总是自动滚动至顶部,这点从用户体验上来讲是极其不爽的,于是开始跳进google大池寻求解决办法.网上的 ...
- 家庭记账本app进度之对于登录和注册两个界面点击按钮的相互跳转
这次主要完成了两个两个android页面之间的跳转.从登录页面点击注册就会跳转到注册页面.在注册页面点击返回登录,这样就可以返回到登录界面.主要是这样的操作.其中遇到了一个困难主要是当点击按钮的时候, ...
- 移动端开发H5页面点击按钮后出现闪烁或黑色背景的解决办法
H5页面在IOS端测试的时候发现,点击按钮会闪动,出现一个黑色的背景一闪而过,影响用户体验.最后通过度娘,找到解决方法: 就是给点击的元素添加一个CSS属性或者全局添加一个css. -webkit-t ...
- layui表格点击排序按钮后，表格绑定事件失效解决方法
最近项目使用layui较为频繁,遇到了一个麻烦的问题,网上搜索也没有看到同类型的问题,故此记下来. 需求是点击上图右侧表格中某一个单元格,会触发点击事件如下代码: $("table>t ...
随机推荐
- 走进JVM【二】理解JVM内存区域
引言 对于C++程序员,内存分配与回收的处理一直是令人头疼的问题.Java由于自身的自动内存管理机制,使得管理内存变得非常轻松,不容易出现内存泄漏,溢出的问题. 不容易不代表不会出现问题,一旦内存泄漏 ...
- 03-body标签中相关标签
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...
- 超详细从零记录Hadoop2.7.3完全分布式集群部署过程
超详细从零记录Ubuntu16.04.1 3台服务器上Hadoop2.7.3完全分布式集群部署过程.包含,Ubuntu服务器创建.远程工具连接配置.Ubuntu服务器配置.Hadoop文件配置.Had ...
- Telnet的三种登录方式
Telnet的三种登录方式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.华为创建telnet的三种验证方式 首先,我们可以简单的看一个拓扑图,让我们可以在亦庄的路由器上对双桥 ...
- php循环删除文件夹和目录
一定要注意文件夹中的两个目录----> .(当前目录) ..(上级目录) 需要对这两个目录进行过滤, 否则在删除或者遍历是会一直,对于..甚至会向你指定的文件夹的上级目录循环操作,删除重要 ...
- Hive记录-Hive on Spark环境部署
1.hive执行引擎 Hive默认使用MapReduce作为执行引擎,即Hive on mr.实际上,Hive还可以使用Tez和Spark作为其执行引擎,分别为Hive on Tez和Hive on ...
- 使用JavaScript修改浏览器URL地址栏的实现代码【转】
引用自http://www.jb51.net/article/42240.htm 现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起 ...
- Study 4 —— 表单标签
表单:用于采集浏览者的相关数据.表单标记<form></form>表单的基本语法格式如下: <form action="url" method=&qu ...
- Study 8 —— 数据类型（列表/list）
列表是一个数据的集合,集合内可以放任何数据类型,可对集合进行方便的增删改查操作 1. 定义列表: 方法一: L1 = [] #定义空列表 L2 = ['A', 'B', 'C'] #存3个值,索引0 ...
- 〖C语言学习笔记 〗(二) 数据类型
前言 本文为c语言的学习笔记,很多只是留下来占位的 数据类型 助记:变量就是在内存中挖个坑并给这个坑命名,而数据类型就是挖内存的坑的尺寸 基础类型 整数类型: short int int long i ...