<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <title>js判断滚动条是否到底部</title> <style> .bottom { width: 500px; height: 50px; position: fixed; left: 50%; margin-left: -250px; top: 50%; background: #f00; color: #fff; line-height: 50px; text-align: center; border-radius: 5px; display: none; } </style> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script> var timer; $(window).bind('scroll', function() { clearTimeout(timer); timer = setTimeout(function() { if ($(window).scrollTop() + $(window).height() == $(document).height()) { alert("已经到底部了"); $(".bottom").fadeIn(); } else { $(".bottom").fadeOut(); } }, 300) }); </script> </head> <body> <div style="width: 100%; height: 2000px;"> 滚动到底部试试~！ </div> <div class="bottom">滚动条，已经到底部了！</div> </body> </html>
js判断滚动条是否到底部demo效果示例（整理）
2023-09-15
29
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
js判断滚动条是否到底部demo效果示例（整理）
目录
相关文章
|
7月前
|
JavaScript
前端开发
Python
|
8月前
|
JavaScript
API
|
2月前
|
JavaScript
js开发：请解释什么是ES6的扩展运算符（spread operator），并给出一个示例。
ES6的扩展运算符（...）用于可迭代对象展开，如数组和对象。在数组中，它能将一个数组的元素合并到另一个数组。例如：`[1, 2, 3, 4, 5]`。在对象中，它用于复制并合并属性，如`{a: 1, b: 2, c: 3}`。
12
3
3
|
2月前
|
JavaScript
js开发：请解释什么是ES6的默认参数（default parameters），并给出一个示例。
ES6允许在函数参数中设置默认值，如`function greet(name = 'World') {...}`。当调用函数不传入`name`参数时，它将默认为'World'，提升代码简洁性和可读性。例如：`greet()`输出"Hello, World!"，`greet('Alice')`输出"Hello, Alice!"。
16
4
4
|
2月前
|
JavaScript
前端开发
js开发：请解释什么是ES6的解构赋值（destructuring assignment），并给出一个示例。
ES6的解构赋值简化了JavaScript中从数组和对象提取数据的过程。例如，`[a, b, c] = [1, 2, 3]`将数组元素赋值给变量，`{name, age} = {name: '张三', age: 18}`则将对象属性赋值给对应变量，提高了代码的可读性和效率。
17
3
3
|
2月前
|
SQL
JavaScript
js开发：请解释什么是ES6的模板字符串（template string），并给出一个示例。
ES6的模板字符串以反引号包围，支持变量和表达式插入以及多行书写。例如，插入变量值`Hello, ${name}!`，计算表达式`${num1 + num2}`，以及创建多行字符串。模板字符串保留原始空格和缩进，简化了字符串拼接，提高了代码可读性。
19
6
6
|
2月前
|
JavaScript
前端开发
js开发：请解释什么是事件委托（event delegation），并给出一个示例。
事件委托是JavaScript中优化事件处理的技术，通过绑定事件处理器到共享的父元素，利用事件冒泡机制来处理子元素的事件。这种方法能提升性能、简化代码并降低内存消耗。示例展示了如何在父元素上监听`click`事件，然后通过`event.target`识别触发事件的具体子元素（如`<li>`），实现对动态生成列表项的点击事件处理。
24
1
1
|
2月前
|
存储
JavaScript
前端开发
js开发：请解释什么是回调函数（callback function），并给出一个示例。
回调函数是JavaScript中处理异步编程的一种常见模式，常用于事件驱动和I/O操作。它们作为参数传递给其他函数，在特定条件满足或任务完成后被调用。例如，`asyncOperation`函数接受回调函数`handleResult`，在模拟的异步操作完成后，调用`handleResult`并传递结果。这使得程序员能在操作完成后执行后续任务。
22
1
1
|
3月前
|
JavaScript
前端开发
Java
|
4月前
|
移动开发
JavaScript
前端开发
热门文章
最新文章
1
JavaScript 权威指南第七版（GPT 重译）（六）(4)
2
JavaScript 权威指南第七版（GPT 重译）（三）(1)
3
JavaScript 权威指南第七版（GPT 重译）（二）(1)
4
JavaScript 权威指南第七版（GPT 重译）（四）(4)
5
JavaScript 权威指南第七版（GPT 重译）（七）(1)
6
JavaScript 权威指南第七版（GPT 重译）（六）(3)
7
JavaScript 权威指南第七版（GPT 重译）（三）(2)
8
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
9
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“；”分号（JavaScript、TypeScript格式化）
10
前端最常见的JS面试题大全
1
JavaScript字符串检查：从基础到高级
26
2
使用 JavaScript 获取 URL 参数的详细指南
679
3
监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
124
4
Java Script 中的垃圾回收机制有哪些缺点
14
5
描述 JavaScript 中的垃圾回收机制。
20
6
如何使用 JavaScript 操作 DOM？
17
7
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
21
8
JavaScript 中的数组方法有哪些？
10
9
JS设置日期为0时0分0秒
30
10
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
26