[HTML]点击按钮，页面总是跳回顶端的解决方法(Clicking an button,always resets the view to top of page)...

最新推荐文章于 2022-12-07 22:33:42 发布

weixin_30467087

最新推荐文章于 2022-12-07 22:33:42 发布

阅读量836

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fanbi/p/8359838.html

版权

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").οnclick=function(){
		alert("You clicked link1");
	}
	document.getElementById("link2").οnclick=function(){
		alert("You clicked link2");
	}
	document.getElementById("link3").οnclick=function(){
		alert("You clicked link3");
	}
	document.getElementById("link4").οnclick=function(){
		alert("You clicked link4");
	}
	document.getElementById("link5").οnclick=function(){
		alert("You clicked link5");
	}
	document.getElementById("link6").οnclick=function(){
		alert("You clicked link6");
	}
</script>

</div>
</body>
</html>

转载于:https://www.cnblogs.com/fanbi/p/8359838.html

weixin_30467087

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
[HTML]点击按钮，页面总是跳回顶端的解决方法(Clicking an button,always resets the view to top of page)...

1 前言　　当网页页面较长或者表单较多时，右侧会出现滚动条，然而经常会出现点击底部的<button>按钮或者<a>超链接，会出现点击后，当前页面会回到顶端。2 方案　　例如样例代码如下：　<a id="link" href="#">linkSample</a>　　方案一：改为href="javascript:...
复制链接

扫一扫