您的位置:首页 > 网页制作 > 心得技巧

JS滚动条判断是否滑动到顶部底部

作者: 来源:

2023-05-21 14:24:17

<!DOCTYPE html>
<html>
<head>
<title>JS滚动条判断是否滑动到顶部底部</title>
<script type="text/javascript" src="style/js/jquery.js"></script>
</head>
<body>
<div class="d" style="height: 2000px; background:#FF0000;"></div>
<script>
/**
* [滚动条]
*/
$(window).scroll(function() {

var scrollTop = $(this).scrollTop(); // 滚动条距离顶部的高度
console.log("滚动条距离顶部的高度-->" + scrollTop);

var scrollHeight = $(document).height(); // 当前页面的总高度
console.log("当前页面的总高度-->" + scrollHeight);

var clientHeight = $(this).height(); // 当前可视的页面高度
console.log("当前可视的页面高度-->" + clientHeight);

if (scrollTop + clientHeight >= scrollHeight) { // 距离顶部高度+可视高度 >= 文档总高度 即代表滑动到底部

// code...
alert('已经到底了!');


else 

if (scrollTop <= 0) {

// code...
alert('已经到顶了!');

}

});
</script>
</body>
</html>
 

猜你喜欢

01 $agent = strtolower($_SERVER[&#39;HTTP_USER_AGENT&#39;]); if(strpos($agent, &#39;iphone&#39;) || strpos($agent, &#39;ipad&#39;)){ echo &#39;苹果系统&#39;; }elseif(strp

2023-06-21 20:21:59

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

2023-05-31 14:53:00

<div class="clearbox"></div> <input class="addBtn min" type="button" value="-" /> <input class="join-money" type="text" value="1"> <input class="addBt

2023-05-27 21:41:38

<!DOCTYPE html> <html> <head> <title>JS滚动条判断是否滑动到顶部底部</title> <script type="text/javascript" src="style/js/jquery.js"></script> </head> <body> <div class="d" s

2023-05-21 14:24:17

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <

2023-04-07 15:26:51

<style type="text/css"> html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTr

2022-12-07 08:27:45

如果你网站是https的,bshare等社会化分享代码无效,不显示,加上下面一句代码即可: <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

2022-04-23 22:12:13

slq把字段里的abc.com替换成vedanc.com update phome_enewskey set keyurl=replace(keyurl,'abc.com','vedanc.com');

2021-08-01 15:54:02

php替换图片里面alt和title内容的方法

2021-04-02 14:34:28

 针对PHP Fast CGI解析漏洞,建议修改 php.ini文件,将cgi.fix_pathinfo的值设置为0。

2020-12-30 16:22:56

© 2007-2021 建站技术网版权所有联系QQ:2140427459