滚动条监听事件

最新推荐文章于 2024-05-19 21:16:45 发布

super_.

最新推荐文章于 2024-05-19 21:16:45 发布

阅读量1w

点赞数 6

分类专栏： JavaScript 文章标签： js监听滚动条滚动事件监听滚动条滚动事件滚动条监听事件一建置顶一建回顶部

本文链接：https://blog.csdn.net/super_DuoLa/article/details/118303833

版权

JavaScript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

需求：

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

分步骤实现：

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>

5、效果

(1)、未滚动

在这里插入图片描述

(2)、滚动，但没到临界值

在这里插入图片描述

(3)、滚动，且大于临界值

super_.

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
滚动条监听事件

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

扫一扫