滚动条监听事件

需求：实现当滚动条滚动到某一位置时，出现“一建回顶部”的按钮及相关事件功能，默认不显示“一建回顶部”分步骤实现：1、简易布局及样式<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/

super_.

10099人浏览 · 2021-06-28 15:24:04

super_. · 2021-06-28 15:24:04 发布

需求：

实现当滚动条滚动到某一位置时，出现“一建回顶部”的按钮及相关事件功能，默认不显示“一建回顶部”

分步骤实现：

1、简易布局及样式

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>滚动条的监听</title>
    <style type="text/css">
		#minco {
			right: 0px;
			top: 35%;
			position: fixed;
			z-index: 1;
			width: 48px;
			cursor: pointer;
		}
	</style>
  </head>
  <body>
	 <div style="height: 2000px;width: 100%;">
	    <p>这里是内容</p>
	    <a id="mtop" title="回到顶部" onclick="backtop();">
	        <img id="minco" src="imgs/top.png">
	    </a>
	 </div>
  </body>
</html>

在这里插入图片描述

2、监听滚动条事件

获取滚动条此刻距离顶部的高度
onscroll 事件：在元素滚动条在滚动时触发。

	window.onscroll= function(){
       //变量t是滚动条滚动时，距离顶部的距离
            var t = document.documentElement.scrollTop||document.body.scrollTop;
            var scrollup = document.getElementById('mtop');
            //当滚动到距离顶部200px时，返回顶部的相关按钮显示
            if(t>=200){
                scrollup.style.display="block";
            }else{//隐藏按钮正常
                scrollup.style.display="none";
            }
       }

3、回顶部事件

一建回顶部

	function backtop(){
	    window.scrollTo(0,0); //滚动到指定的坐标
    }

4、完整版代码

首先要隐藏“回顶部”按钮

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>滚动条的监听</title>
    <style type="text/css">
		#minco {
			right: 0px;
			top: 35%;
			position: fixed;
			z-index: 1;
			width: 48px;
			cursor: pointer;
		}
		
	</style>
	<script type="text/javascript">
		function backtop(){
			window.scrollTo(0,0);
		}
		window.onscroll= function(){
	        //变量t是滚动条滚动时，距离顶部的距离
	        var t = document.documentElement.scrollTop||document.body.scrollTop;
	        var scrollup = document.getElementById('mtop');
	        //当滚动到距离顶部200px时，返回顶部的按钮显示
	        if(t>=200){
	            scrollup.style.display="block";
	        }else{          //恢复正常
	            scrollup.style.display="none";
	        }
	    }
		
	</script>
  </head>
  <body>
	 <div style="height: 2000px;width: 100%;">
	    <p>这里是内容</p>
	    <a id="mtop" title="回到顶部" onclick="backtop();" style="display: none">
	        <img id="minco" src="imgs/top.png">
	    </a>
	 </div>
  </body>
</html>