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)的更多相关文章

  1. html网页中 点击按钮页面跳转

    在html页面中 实现点击按钮页面跳转.语句如下: <input type="button" value="跳转" onClick="windo ...

  2. HTML实现页面自动跳转的五种方法

    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1)html的实现 复制代码 代码如下: <head> ...

  3. 关于Hexo,Next主题的‘下一页’、‘上一页’按钮错误显示为html代码 的解决方法

    关于Next主题的'下一页'.'上一页'按钮错误显示为html代码的解决方法 我在建立自己的博客过程中遇到了页面'下一页'和'上一页'按钮显示为html代码<i class="fa f ...

  4. 关于vscode自动跳转回车的解决方法(关闭vscode自动保存功能;可能和其他插件有冲突)

    关于vscode自动跳转回车的解决方法(关闭vscode自动保存功能:可能和其他插件有冲突)

  5. Eclipse 新建.jsp页面后,页面头部标签报错的解决方法

    Eclipse 新建.jsp页面后,页面头部标签报错的解决方法 1.报错地方: 2.解决方法: .jsp页面右键==>BUild Path ==>Configure Build Path. ...

  6. 点击<a>标签,禁止页面自动跳到顶部的解决办法

       最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能,但是发现点击按钮后页面总是自动滚动至顶部,这点从用户体验上来讲是极其不爽的,于是开始跳进google大池寻求解决办法.网上的 ...

  7. 家庭记账本app进度之对于登录和注册两个界面点击按钮的相互跳转

    这次主要完成了两个两个android页面之间的跳转.从登录页面点击注册就会跳转到注册页面.在注册页面点击返回登录,这样就可以返回到登录界面.主要是这样的操作.其中遇到了一个困难主要是当点击按钮的时候, ...

  8. 移动端开发H5页面点击按钮后出现闪烁或黑色背景的解决办法

    H5页面在IOS端测试的时候发现,点击按钮会闪动,出现一个黑色的背景一闪而过,影响用户体验.最后通过度娘,找到解决方法: 就是给点击的元素添加一个CSS属性或者全局添加一个css. -webkit-t ...

  9. layui表格点击排序按钮后,表格绑定事件失效解决方法

    最近项目使用layui较为频繁,遇到了一个麻烦的问题,网上搜索也没有看到同类型的问题,故此记下来. 需求是点击上图右侧表格中某一个单元格,会触发点击事件如下代码: $("table>t ...

随机推荐

  1. css3硬件加速

    你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多数电脑的显卡都支持硬件加速.鉴于此,我们可以发挥GPU ...

  2. Eclipse导入模板格式Xml配置文件

    Eclipse一般常用的可以导入两处 *.xml 格式的模板,一个是常用的注释格式模板,另一个是代码格式化时用的模板,导入方法如下: 假设: 1.xml 是代码注释格式模板     2.xml 是代码 ...

  3. 多线程(Thread,Runnable)

    一.多线程. 1.进程:一个正在执行的程序叫做进程. 每一个进程的执行都有一个执行顺序,这个顺序就是一个执行的路径,或者叫做一个控制单元. 2.线程:就是上述进程中的一个独立控制单元, 线程在控制着进 ...

  4. MySQL中使用like查找汉字 Incorrect string value 解决办法

    用Select…like %…%来查找MySQL的text类型字段的一个中文,却发现查出来的是乱的,发现不少人也遇到这样的问题.在中文排序和查找的时候,汉字的结果是错误的. 原因在于MySQL在查找字 ...

  5. 获取天气预报API

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  6. 学习windows编程 day3 之窗口绘画一:点线绘制

    #include <windows.h> #include <math.h> LRESULT CALLBACK WndProc(HWND hwnd, UINT message, ...

  7. 利用@jsonView注解来实现自定义返回字段

    业务场景:比如说一个User对象,有两个字段,一个username,一个password,有一个获取用户信息的接口要返回这个User列表,但是不想要这个User列表的password字段. 还有一个接 ...

  8. Hive记录-配置支持事务管理hive-site.xml

    <property> <name>hive.support.concurrency</name> <value>true</value> & ...

  9. 通过read()读文件

    一.在POSIX中的定义 #include <unistd.h> ssize_t read(int fd, void *buf, size_t len); 二.调用read()的可能结果 ...

  10. Rancher

    Rancher Docker容器管理平台:图像化管理平台. centos server 10.100.10.10 docker node 10.100.10.15 安装 docker  search ...