js 回到顶部

最新推荐文章于 2024-04-04 01:01:58 发布

勤勤勤能补拙

最新推荐文章于 2024-04-04 01:01:58 发布

阅读量290

点赞数

本文链接：https://blog.csdn.net/zark721/article/details/70239425

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

阻止连接默认跳转，利用监听事件参数 e,并调用函数preventDefault()

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
	<title></title>
	<style type="text/css">
		a{
			display: block;
			width: 40px;
			height: 40px;
			background-color: blue;
			position: fixed;
			right: 10px;
			bottom: 0px;
		}	
		p{
			height: 500px;	
		}
	</style>
</head>
<body>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<a href="" id="ha">连接</a>  
	<script>
		var timer=null;
		var d=document.getElementById("ha");
		d.addEventListener("click",function(e){
			 e.preventDefault();  //阻止默认行为，在这里可以阻止连接的默认跳转
			 timer=setInterval("back()",20);//设置定时器，每20ms执行一次back函数
		},false);
		function back(){
			if(document.body.scrollTop==0){ //当滚动条回到顶部，清除定时器。
				clearInterval(timer);
			}else{
				document.body.scrollTop-=300; 
			}
		}
	</script>
</body>
</html>

阻止默认跳转的另一种方式 href='javascript:;'

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
	<title></title>
	<style type="text/css">
		a{
			display: block;
			width: 40px;
			height: 40px;
			background-color: blue;
			position: fixed;
			right: 10px;
			bottom: 0px;
		}	
		p{
			height: 500px;	
		}
	</style>
</head>
<body>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
	<a href="javascript:;" id="ha">连接</a>  <!--javascript:; 执行一段空代码,即什么也不做，连接不会跳转-->
	<script>
		var timer=null;
		var d=document.getElementById("ha");
		d.addEventListener("click",function(e){
			 //e.preventDefault(); 
			 timer=setInterval("back()",20);//设置定时器，每20ms执行一次back函数
		},false);
		function back(){
			if(document.body.scrollTop==0){ //当滚动条回到顶部，清除定时器。
				clearInterval(timer);
			}else{
				document.body.scrollTop-=300; 
			}
		}
	</script>
</body>
</html>

补充:

javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。跟href="javascript:void(0)"是一样

勤勤勤能补拙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 回到顶部

阻止连接默认跳转，利用监听事件参数 e,并调用函数preventDefault() a{ display: block; width: 40px; height: 40px; background-color: blue; position: fixed; right: 10px; bottom: 0px; } p{
复制链接

扫一扫

专栏目录