设为首页收藏本站

智海云轩 › 智海云轩 › 编程/办公 › 网络编程 › jq 页面至底不用愁！3 种场景代码实例，点击、加载、定 ...

jq 页面至底不用愁！3 种场景代码实例，点击、加载、定位全教会，复制即生效

[复制链接]
码农民
发表于 2025-9-24 00:24:55 浏览 32
一、先搞懂：“页面至底” 到底要实现啥？咱平时刷网页遇到的 “回到底部”“滚动到底加载更多”，本质都是用 jq 操作页面滚动位置。先明确两个核心概念，后面代码才好理解：页面总高度：整个网页内容的高度（包括看不到的部分）可视区高度：浏览器窗口能看到的高度滚动距离：页面向上滚动过的距离（滚动条拉了多少）记住这仨，后面判断 “是不是到底了” 全靠它们！二、场景 1：点击按钮直接跳到底部（最常用）比如电商详情页底部的 “回到底部” 按钮，点一下就飞到底，代码超简单，3 步搞定：1. 先写 HTML 结构（按钮 + 长内容）得有个按钮触发，再搞点长内容让页面能滚动，不然看不出效果：<!-- 回到底部按钮：默认隐藏，滚动后显示 -->
  1. <div data-zone-id="uYEGVCq87x5EGQQLSocV" data-line-index="1" data-line="true"><button class="go-bottom" style="display:none; position:fixed; right:20px; bottom:20px; padding:10px 15px; cursor:pointer;"></div><div data-zone-id="uYEGVCq87x5EGQQLSocV" data-line-index="2" data-line="true">  回到底部</div><div data-zone-id="uYEGVCq87x5EGQQLSocV" data-line-index="3" data-line="true"></button></div>
复制代码

<!-- 长内容：随便写点让页面变长，模拟真实网页 -->
  1. <div data-zone-id="uYEGVCq87x5EGQQLSocV" data-line-index="6" data-line="true"><div class="content"></div><div data-zone-id="uYEGVCq87x5EGQQLSocV" data-line-index="7" data-line="true">  <p>这里是第1段内容...（复制几十遍让页面够长）</p></div><div data-zone-id="uYEGVCq87x5EGQQLSocV" data-line-index="8" data-line="true">  <p>这里是第2段内容...</p></div><div data-zone-id="uYEGVCq87x5EGQQLSocV" data-line-index="9" data-line="true">  <!-- 省略N多段... --></div><div data-zone-id="uYEGVCq87x5EGQQLSocV" data-line-index="10" data-line="true"></div></div>
复制代码

2. 核心 jq 代码（点击跳转 + 按钮显示隐藏）
  1. <div data-zone-id="0" data-line-index="12" data-line="true">重点看 animate 方法，这是 jq 实现平滑滚动的关键，比原生 js 简单 10 倍：</div><div data-zone-id="0" data-line-index="13" data-line="true"><pre><code><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="0" data-line="true" style="text-wrap: wrap;">// 等页面加载完再执行（必须加，不然可能找不到元素）</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="1" data-line="true" style="text-wrap: wrap;">$(document).ready(function(){</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="2" data-line="true" style="text-wrap: wrap;">  // 1. 滚动时判断：页面滚过200px就显示按钮，否则隐藏</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="3" data-line="true" style="text-wrap: wrap;">  $(window).scroll(function(){</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="4" data-line="true" style="text-wrap: wrap;">    // 获取滚动距离：$(this).scrollTop()</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="5" data-line="true" style="text-wrap: wrap;">    if($(this).scrollTop() > 200){</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="6" data-line="true" style="text-wrap: wrap;">      $('.go-bottom').show(); // 显示按钮</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="7" data-line="true" style="text-wrap: wrap;">    } else {</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="8" data-line="true" style="text-wrap: wrap;">      $('.go-bottom').hide(); // 隐藏按钮</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="9" data-line="true" style="text-wrap: wrap;">    }</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="10" data-line="true" style="text-wrap: wrap;">  });</div></code><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="11" data-line="true" style="text-wrap: wrap;"><code><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="12" data-line="true">  // 2. 点击按钮跳到底部</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="13" data-line="true">  $('.go-bottom').click(function(){</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="14" data-line="true">    $('html, body').animate({</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="15" data-line="true">      scrollTop: $(document).height() // 滚动到页面总高度（就是底部）</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="16" data-line="true">    }, 500); // 500毫秒完成滚动，数字越大越慢</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="17" data-line="true">  });</div><div data-zone-id="wv0f32obWYOjxJ6J9FvC" data-line-index="18" data-line="true">});</div></code></div></pre></div>
复制代码

3. 避坑点！新手必看为啥要同时写 html 和 body？因为 Chrome 认 body，Firefox 认 html，写俩才能兼容所有浏览器按钮别忘加 position:fixed，不然滚动时会跟着跑，固定在右下角才对内容不够长？复制几段 <p> 标签，不然页面没滚动条，按钮永远不显示三、场景 2：滚动到底部触发事件（加载更多用）比如朋友圈刷到底自动加载新内容，核心是 “判断啥时候滚到底了”，代码比场景 1 多一步判断：1. HTML 结构（加个加载提示）
  1. <div data-zone-id="7jpWAaFvgy4e4yq9Vb4m" data-line-index="0" data-line="true"><div class="content"></div><div data-zone-id="7jpWAaFvgy4e4yq9Vb4m" data-line-index="1" data-line="true">  <!-- 还是长内容，同上 --></div><div data-zone-id="7jpWAaFvgy4e4yq9Vb4m" data-line-index="2" data-line="true"></div></div><div data-zone-id="7jpWAaFvgy4e4yq9Vb4m" data-line-index="3" data-line="true"><!-- 加载提示：默认隐藏，滚到底显示 --></div><div data-zone-id="7jpWAaFvgy4e4yq9Vb4m" data-line-index="4" data-line="true"><div class="loading" style="display:none; text-align:center; padding:20px;"></div><div data-zone-id="7jpWAaFvgy4e4yq9Vb4m" data-line-index="5" data-line="true">  正在加载更多...</div><div data-zone-id="7jpWAaFvgy4e4yq9Vb4m" data-line-index="6" data-line="true"></div></div>
复制代码

2. jq 代码（判断滚动到底 + 触发加载）
  1. <div data-zone-id="0" data-line-index="23" data-line="true">关键公式：滚动距离 + 可视区高度 >= 页面总高度 - 100（减 100 是提前加载，体验更好）</div><div data-zone-id="0" data-line-index="24" data-line="true"><pre><code><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="0" data-line="true" style="text-wrap: wrap;">$(document).ready(function(){</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="1" data-line="true" style="text-wrap: wrap;">  let isLoading = false; // 防重复加载：正在加载时不让再触发</div></code><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="2" data-line="true" style="text-wrap: wrap;"><code><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="3" data-line="true">  $(window).scroll(function(){</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="4" data-line="true">    // 计算是否快滚到底了（减100是提前100px开始加载）</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="5" data-line="true">    const scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="6" data-line="true">    </div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="7" data-line="true">    // 条件：1. 没在加载中 2. 快滚到底了（scrollBottom < 100）</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="8" data-line="true">    if(!isLoading && scrollBottom < 100){</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="9" data-line="true">      isLoading = true; // 标记为正在加载</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="10" data-line="true">      $('.loading').show(); // 显示加载提示</div></code><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="11" data-line="true"><code><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="12" data-line="true">      // 模拟加载数据（实际项目里这里是AJAX请求接口）</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="13" data-line="true">      setTimeout(function(){</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="14" data-line="true">        // 加载完后往内容里加新东西</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="15" data-line="true">        $('.content').append(`</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="16" data-line="true">          <p>新加载的内容1...</p></div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="17" data-line="true">          <p>新加载的内容2...</p></div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="18" data-line="true">        `);</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="19" data-line="true">        $('.loading').hide(); // 隐藏加载提示</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="20" data-line="true">        isLoading = false; // 重置加载状态，允许下次加载</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="21" data-line="true">      }, 1500); // 模拟接口请求耗时1.5秒</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="22" data-line="true">    }</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="23" data-line="true">  });</div><div data-zone-id="5T8GierWfm4kq6Hkkuox" data-line-index="24" data-line="true">});</div></code></div></div></pre></div>
复制代码

3. 避坑点！防止重复加载一定要加 isLoading 变量！不然滚动快的时候会触发 N 次加载，接口直接被刷爆提前加载（减 100）比正好滚到底再加载体验好，用户不会等太久实际项目里把 setTimeout 换成 $.ajax 或 $.get 请求后端接口，这里只是模拟四、场景 3：跳到底部指定位置（不是绝对底部）比如页面底部有个 “联系我们” 模块，想点击后直接滚到这个模块，而不是页面最底，用 offset().top 就行：1. HTML 结构（底部指定模块）
  1. <div data-zone-id="joTm4I6BlvVEMrghPiKE" data-line-index="0" data-line="true"><button class="go-contact">跳转到联系我们</button></div><div data-zone-id="joTm4I6BlvVEMrghPiKE" data-line-index="1" data-line="true"><div data-zone-id="joTm4I6BlvVEMrghPiKE" data-line-index="2" data-line="true"><div class="content"></div><div data-zone-id="joTm4I6BlvVEMrghPiKE" data-line-index="3" data-line="true">  <!-- 长内容同上 --></div><div data-zone-id="joTm4I6BlvVEMrghPiKE" data-line-index="4" data-line="true"></div></div><div data-zone-id="joTm4I6BlvVEMrghPiKE" data-line-index="5" data-line="true"><div data-zone-id="joTm4I6BlvVEMrghPiKE" data-line-index="6" data-line="true"><!-- 底部联系模块：给个ID方便定位 --></div><div data-zone-id="joTm4I6BlvVEMrghPiKE" data-line-index="7" data-line="true"><div id="contact" style="height:200px; background:#f5f5f5; padding:20px;"></div><div data-zone-id="joTm4I6BlvVEMrghPiKE" data-line-index="8" data-line="true">  <h3>联系我们</h3></div><div data-zone-id="joTm4I6BlvVEMrghPiKE" data-line-index="9" data-line="true">  <p>电话：123456789</p></div><div data-zone-id="joTm4I6BlvVEMrghPiKE" data-line-index="10" data-line="true"></div></div></div></div>
复制代码

2. jq 代码（定位到指定模块）
  1. <div data-zone-id="0" data-line-index="34" data-line="true">核心是 $('#contact').offset().top，获取目标模块距离页面顶部的距离：</div><div data-zone-id="0" data-line-index="35" data-line="true"><pre><code><div data-zone-id="5IyYhen7rwYq9YXnt78X" data-line-index="0" data-line="true" style="text-wrap: wrap;">$(document).ready(function(){</div><div data-zone-id="5IyYhen7rwYq9YXnt78X" data-line-index="1" data-line="true" style="text-wrap: wrap;">  $('.go-contact').click(function(){</div><div data-zone-id="5IyYhen7rwYq9YXnt78X" data-line-index="2" data-line="true" style="text-wrap: wrap;">    $('html, body').animate({</div><div data-zone-id="5IyYhen7rwYq9YXnt78X" data-line-index="3" data-line="true" style="text-wrap: wrap;">      // 滚动到#contact模块的顶部位置</div><div data-zone-id="5IyYhen7rwYq9YXnt78X" data-line-index="4" data-line="true" style="text-wrap: wrap;">      scrollTop: $('#contact').offset().top</div><div data-zone-id="5IyYhen7rwYq9YXnt78X" data-line-index="5" data-line="true" style="text-wrap: wrap;">    }, 600);</div><div data-zone-id="5IyYhen7rwYq9YXnt78X" data-line-index="6" data-line="true" style="text-wrap: wrap;">  });</div><div data-zone-id="5IyYhen7rwYq9YXnt78X" data-line-index="7" data-line="true" style="text-wrap: wrap;">});</div></code></pre></div>
复制代码

3. 优化技巧：加个偏移量如果顶部有固定导航栏，滚到模块时会被导航栏挡住，加个偏移量就行：scrollTop: $('#contact').offset().top - 80 // 假设导航栏高80px，往上挪80px五、3 个场景代码汇总（直接复制能用）把上面的整合一下，加了点样式，复制到 HTML 文件里直接打开就能用：
  1. <div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="0" data-line="true"><!DOCTYPE html></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="1" data-line="true"><html lang="zh-CN"></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="2" data-line="true"><head></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="3" data-line="true">  <meta charset="UTF-8"></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="4" data-line="true">  <title>jq页面至底实例</title></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="5" data-line="true">  <!-- 引入jq：必须加，不然jq代码用不了（用百度CDN，不用下载） --></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="6" data-line="true">  <script src="https://cdn.bootcss.com/jquery/3.6.4/jquery.min.js"></script></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="7" data-line="true">  <style></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="8" data-line="true">    .go-bottom {</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="9" data-line="true">      display: none;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="10" data-line="true">      position: fixed;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="11" data-line="true">      right: 20px;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="12" data-line="true">      bottom: 20px;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="13" data-line="true">      padding: 10px 15px;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="14" data-line="true">      background: #008cba;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="15" data-line="true">      color: white;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="16" data-line="true">      border: none;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="17" data-line="true">      border-radius: 4px;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="18" data-line="true">      cursor: pointer;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="19" data-line="true">    }</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="20" data-line="true">    .go-contact {</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="21" data-line="true">      margin: 20px;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="22" data-line="true">      padding: 8px 16px;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="23" data-line="true">      background: #4CAF50;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="24" data-line="true">      color: white;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="25" data-line="true">      border: none;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="26" data-line="true">      border-radius: 4px;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="27" data-line="true">      cursor: pointer;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="28" data-line="true">    }</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="29" data-line="true">    .loading {</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="30" data-line="true">      display: none;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="31" data-line="true">      text-align: center;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="32" data-line="true">      padding: 20px;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="33" data-line="true">      color: #666;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="34" data-line="true">    }</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="35" data-line="true">    #contact {</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="36" data-line="true">      height: 200px;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="37" data-line="true">      background: #f5f5f5;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="38" data-line="true">      padding: 20px;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="39" data-line="true">      margin-top: 50px;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="40" data-line="true">    }</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="41" data-line="true">    .content p {</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="42" data-line="true">      margin: 10px 0;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="43" data-line="true">      line-height: 1.8;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="44" data-line="true">    }</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="45" data-line="true">  </style></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="46" data-line="true"></head></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="47" data-line="true"><body></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="48" data-line="true">  <button class="go-contact">跳转到联系我们</button></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="49" data-line="true">  <button class="go-bottom">回到底部</button></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="50" data-line="true"><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="51" data-line="true">  <div class="content"></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="52" data-line="true">    <p>这里是第1段内容：jq实现页面至底其实很简单，关键是搞懂scrollTop、height这些属性...</p></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="53" data-line="true">    <p>这里是第2段内容：平时开发中，点击跳转、滚动加载、定位模块是最常见的三种场景...</p></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="54" data-line="true">    <p>这里是第3段内容：复制几十遍这段文字，让页面变长，不然看不到滚动效果哦...</p></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="55" data-line="true">    <!-- 此处省略N多段，实际用的时候自己加内容 --></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="56" data-line="true">    <p>这里是第N段内容：快滚到底了，马上要触发加载更多...</p></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="57" data-line="true">  </div></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="58" data-line="true"><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="59" data-line="true">  <div class="loading">正在加载更多...</div></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="60" data-line="true"><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="61" data-line="true">  <div id="contact"></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="62" data-line="true">    <h3>联系我们</h3></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="63" data-line="true">    <p>电话：123456789</p></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="64" data-line="true">    <p>邮箱：example@xxx.com</p></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="65" data-line="true">  </div></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="66" data-line="true"><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="67" data-line="true">  <script></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="68" data-line="true">    $(document).ready(function(){</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="69" data-line="true">      // 1. 回到底部按钮：显示隐藏+点击跳转</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="70" data-line="true">      $(window).scroll(function(){</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="71" data-line="true">        if($(this).scrollTop() > 200){</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="72" data-line="true">          $('.go-bottom').show();</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="73" data-line="true">        } else {</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="74" data-line="true">          $('.go-bottom').hide();</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="75" data-line="true">        }</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="76" data-line="true">      });</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="77" data-line="true"><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="78" data-line="true">      $('.go-bottom').click(function(){</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="79" data-line="true">        $('html, body').animate({</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="80" data-line="true">          scrollTop: $(document).height()</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="81" data-line="true">        }, 500);</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="82" data-line="true">      });</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="83" data-line="true"><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="84" data-line="true">      // 2. 滚动到底加载更多</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="85" data-line="true">      let isLoading = false;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="86" data-line="true">      $(window).scroll(function(){</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="87" data-line="true">        const scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="88" data-line="true">        if(!isLoading && scrollBottom < 100){</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="89" data-line="true">          isLoading = true;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="90" data-line="true">          $('.loading').show();</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="91" data-line="true">          // 模拟接口请求</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="92" data-line="true">          setTimeout(function(){</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="93" data-line="true">            $('.content').append(`</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="94" data-line="true">              <p>新加载的内容：这是从后端接口拿的数据，实际项目里用$.ajax替换setTimeout...</p></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="95" data-line="true">              <p>新加载的内容：加载完成后要重置isLoading，不然不能再次加载...</p></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="96" data-line="true">            `);</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="97" data-line="true">            $('.loading').hide();</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="98" data-line="true">            isLoading = false;</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="99" data-line="true">          }, 1500);</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="100" data-line="true">        }</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="101" data-line="true">      });</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="102" data-line="true"><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="103" data-line="true">      // 3. 跳转到联系我们模块（加80px偏移，假设顶部有80px高的导航栏）</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="104" data-line="true">      $('.go-contact').click(function(){</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="105" data-line="true">        $('html, body').animate({</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="106" data-line="true">          scrollTop: $('#contact').offset().top - 80</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="107" data-line="true">        }, 600);</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="108" data-line="true">      });</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="109" data-line="true">    });</div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="110" data-line="true">  </script></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="111" data-line="true"></body></div><div data-zone-id="KUa2AOBY4bTPZFT6RIEc" data-line-index="112" data-line="true"></html></div></div></div></div></div></div></div></div>
复制代码

六、最后说点实用的：项目里怎么改？引入 jq：如果项目里已经有 jq，就不用再引了；没有的话，复制代码里的百度 CDN 链接就行改样式：按钮颜色、加载提示文字，直接改 CSS 里的属性，比如把 background: #008cba 换成自己要的颜色换数据：加载更多的 setTimeout 里，把 append 的内容换成接口返回的数据，用 $.get 或 $.ajax 请求后端加导航偏移：如果页面顶部有固定导航，在定位模块时加 - 导航高度，比如导航高 60px，就写 scrollTop: $('#contact').offset().top - 60
回复

举报

QQ|二维码生成器|粟瑟惠 ( 粤ICP备2024310979号-1 )

GMT+8, 2025-12-6 14:35 , Processed in 0.029680 second(s), 19 queries .

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.