js判断滚动条是否到底部demo效果示例(整理)

简介: js判断滚动条是否到底部demo效果示例(整理)
<!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>
相关文章
|
2月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
44 0
JS配合CSS3实现动画和拖动小星星小Demo
|
2月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
51 3
|
3月前
|
前端开发 JavaScript 开发者
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
本文提供了一个前端JS按钮点击事件、弹出式窗口和遮罩层的实战示例,包括HTML、CSS和JavaScript的具体实现代码,以及功能解析,演示了如何实现按钮点击后触发弹窗显示和遮罩层,并在2秒后自动关闭或点击遮罩层关闭弹窗的效果。
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
|
3月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
3月前
|
JavaScript 前端开发
JavaScript——一个简单的队列Demo
JavaScript——一个简单的队列Demo
41 4
|
3月前
|
JavaScript
js之三级联动示例
js之三级联动示例
45 1
|
3月前
|
JSON Dart 前端开发
分享15 个 JavaScript 代码示例及其 Dart 对应代码。
本文对比了React/React Native中的JavaScript语法与Flutter中的Dart语法,帮助开发者快速上手Flutter。内容涵盖JSON处理、数组操作、类型转换、条件判断等常见功能,如`JSON.stringify`与`JsonEncoder().convert`,`array.push`与`list.add`,`parseInt`与`int.parse`等,并提供了15个JavaScript与Dart代码示例对照。这对于从JavaScript转向Dart的开发者尤其有用。
26 0
|
3月前
|
存储 移动开发 JavaScript
JavaScript简介及示例
JavaScript简介及示例
|
4月前
|
JSON Dart 前端开发
JavaScript 代码示例及 Dart 对应代码
JavaScript 代码示例及 Dart 对应代码
47 5