zoukankan      html  css  js  c++  java
  • [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; 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>
  • 相关阅读:
    v-bind绑定属性样式——class的三种绑定方式
    vue知识点15
    iOS开发——heightForHeaderInSection设置高度无效
    iOS开发——AFNetworking基于https的使用
    iOS开发——循环遍历的比较
    iOS开发——Block使用小结
    iOS开发——GCD总结
    iOS开发者中心重置设备列表
    iOS开发—— Couldn't add the Keychain Item
    iOS——扬声器与听筒的切换
  • 原文地址:https://www.cnblogs.com/fanbi/p/8359838.html
Copyright © 2011-2022 走看看