【JS/jQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

Rossy Yan

发布于 2025-03-16 20:28:01

65600

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

日常浏览网页的时候，我们会发现一个问题，当页面太长、内容太多的时候我们很难快速浏览到心仪的内容。为了解决这个烦恼，优秀的产品研发团队发明了一种类似传送门的功能，以便用户能通过它快速定位到感兴趣的内容。这个功能也被通俗地比喻为“电梯”。本题需要在已提供的基础项目中使用 JS/jQuery 等知识完善代码，最终实现该功能。

准备步骤

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── effect.gif
├── index.html
├── css
├── images
└── js
    ├── index.js
    └── jquery-3.6.0.min.js

其中：

effect.gif 是最终实现的效果图。
index.html 是主页面。
css 是样式文件夹。
images 是素材图片文件夹。
js/index.js 是需要补充代码的 js 文件。
js/jquery-3.6.0.min.js 是 jQuery 文件。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9790/01.zip && unzip 01.zip && rm 01.zip

在浏览器中预览 index.html 页面

目标效果

请在 js/index.js 文件中补全代码，最终实现传送门的功能。具体需求如下：

点击页面侧边的顶部、中间或底部按钮，页面滚动到顶部、中间或底部对应的范围内。这三个范围的设定如下：

顶部：滚动条距离页面顶部 0 ～ 960px（不包含 960）的范围。
中间：滚动条距离页面顶部 960 ～ 1920px（包含 960，不包含 1920）的范围。
底部：滚动条距离页面顶部大于等于 1920px 的范围。

当页面滚动到顶部、中间或底部位置时，对应的侧边按钮（即，顶部、中间或底部按钮）添加激活样式（即 **.active-color**），其余按钮样式变为默认（即 **.default-color**）。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

要求规定

请勿修改 js/index.js 文件外的任何内容。
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

判分标准

实现点击侧边按钮快速定位内容功能，得 2 分。
实现侧边按钮文字颜色随页面内容滚动而变化功能，得 3 分。

通关代码✔️

$(window).scroll(function () {
  // 页面滚动到指定范围，对应的侧边按钮字体变色
  // TODO：请补充代码实现功能
  var scrollTopValue = document.documentElement.scrollTop
  var index
  if(scrollTopValue>= 0 && scrollTopValue < 959){index = 0}
  if(scrollTopValue>= 960 && scrollTopValue < 1920){index = 1}
  if(scrollTopValue> 1920 && scrollTopValue < Infinity){index = 2}
  jQuery(".default-color").eq(index).addClass('active-color').siblings().removeClass('active-color');
});

/**
 * @param {Object} scrollTopVal：到达指定位置需要滚动的高度
 * 点击按钮，滚动到指定位置
 */
function toFunction(scrollTopVal) {
  // TODO：请补充代码实现功能
  document.documentElement.scrollTop=scrollTopVal
}

代码解析📑

一、HTML 部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>传送门</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>
  <body>
    <div id="top"></div>
    <div id="middle"></div>
    <div id="foot"></div>
    <div id="lift">
      <a class="default-color active-color" onclick="toFunction.call(this,0)">顶部</a>
      <span class="line"></span>
      <a class="default-color" onclick="toFunction.call(this,960)">中间</a>
      <span class="line"></span>
      <a class="default-color" onclick="toFunction.call(this,2000)">底部</a>
    </div>
    <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
  </body>
</html>

<!DOCTYPE html>：声明文档类型为 HTML5。
<head> 部分：
- <meta charset="utf-8" />：设置字符编码为 UTF - 8。
- <title>传送门</title>：设置网页标题为 “传送门”。
- <link rel="stylesheet" type="text/css" href="./css/index.css" />：引入外部 CSS 文件 index.css 来设置页面样式。
<body> 部分：
- <div id="top"></div>、<div id="middle"></div>、<div id="foot"></div>：分别表示页面的顶部、中间和底部区域。
- <div id="lift">：侧边栏容器，包含三个链接和分隔线。
  - <a> 标签：三个链接，分别绑定了 toFunction 函数，点击时会调用该函数并传入不同的滚动高度参数。
  - <span class="line"></span>：分隔线。
- <script> 标签：引入 jQuery 库和自定义的 JavaScript 文件 index.js。

二、CSS 部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #f4f4f4;
}
a {
  cursor: pointer;
}
#top {
  width: 1000px;
  height: 960px;
  margin: 0 auto;
  background: url(../images/bg.png) no-repeat;
  background-size: cover;
}
#middle {
  width: 1000px;
  height: 960px;
  margin: 0 auto;
  background: url(../images/bg.png) no-repeat;
  background-size: cover;
  background-position: 0 -961px;
}
#foot {
  width: 1000px;
  height: 1020px;
  margin: 0 auto;
  background: url(../images/bg.png) no-repeat;
  background-size: cover;
  background-position: 0 -1921px;
}
#lift {
  width: 78px;
  height: 300px;
  background-color: white;
  position: fixed;
  right: 0;
  bottom: 100px;
  text-align: center;
  top: 50%;
  margin-top: -150px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
#lift a {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.line {
  display: block;
  width: 50%;
  height: 1px;
  margin: 0 auto;
  background-color: gainsboro;
}
.default-color {
  color: #333;
}
.active-color {
  color: #2e7eee;
}

* { margin: 0; padding: 0; box-sizing: border-box; }：将所有元素的外边距和内边距设置为 0，并使用 box-sizing: border-box 使元素的宽度和高度包含内边距和边框。
body { background-color: #f4f4f4; }：设置页面背景颜色。
a { cursor: pointer; }：将链接的鼠标指针样式设置为手型。
#top、#middle、#foot：分别设置顶部、中间和底部区域的宽度、高度、居中显示和背景图片。
#lift：设置侧边栏的样式，包括宽度、高度、背景颜色、固定位置、居中显示和使用 Flexbox 布局。
#lift a：设置侧边栏链接的样式，包括宽度、高度、居中显示和去除下划线。
.line：设置分隔线的样式。
.default-color 和 .active-color：分别设置链接的默认颜色和激活颜色。

三、JavaScript 部分

$(window).scroll(function () {
  // 页面滚动到指定范围，对应的侧边按钮字体变色
  // TODO：请补充代码实现功能
  var scrollTopValue = document.documentElement.scrollTop;
  var index;
  if (scrollTopValue >= 0 && scrollTopValue < 959) {
    index = 0;
  }
  if (scrollTopValue >= 960 && scrollTopValue < 1920) {
    index = 1;
  }
  if (scrollTopValue > 1920 && scrollTopValue < Infinity) {
    index = 2;
  }
  jQuery(".default-color").eq(index).addClass('active-color').siblings().removeClass('active-color');
});

/**
 * @param {Object} scrollTopVal：到达指定位置需要滚动的高度
 * 点击按钮，滚动到指定位置
 */
function toFunction(scrollTopVal) {
  // TODO：请补充代码实现功能
  document.documentElement.scrollTop = scrollTopVal;
}

$(window).scroll(function () { ... })：监听窗口的滚动事件。
- var scrollTopValue = document.documentElement.scrollTop;：获取当前页面的滚动高度。
- 通过 if 语句判断滚动高度所在的范围，确定对应的索引 index。
- jQuery(".default-color").eq(index).addClass('active-color').siblings().removeClass('active-color');：根据索引找到对应的链接，添加 active-color 类，同时移除其他链接的 active-color 类，实现链接文字颜色的切换。
function toFunction(scrollTopVal) { ... }：点击链接时调用的函数。
- document.documentElement.scrollTop = scrollTopVal;：将页面滚动到指定的高度。