javaScript蓝桥杯---传送门

一、介绍

日常浏览网页的时候，我们会发现一个问题，当页面太长、内容太多的时候我们很难快速浏览到心仪的内容。为了解决这个烦恼，优秀的产品研发团队发明了一种类似传送门的功能，以便用户能通过它快速定位到感兴趣的内容。这个功能也被通俗地比喻为“电梯”。

本题需要在已提供的基础项目中使用 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 文件。

在浏览器中预览 index.html 页面，显示如下所示：
在这里插入图片描述

三、目标

请在 js/index.js 文件中补全代码，最终实现传送门的功能。

具体需求如下：

点击页面侧边的顶部、中间或底部按钮，页面滚动到顶部、中间或底部对应的范围内。这三个范围的设定如下：
- 顶部：滚动条距离页面顶部 0 ～ 960px（不包含 960）的范围。
- 中间：滚动条距离页面顶部 960 ～ 1920px（包含 960，不包含 1920）的范围。
- 底部：滚动条距离页面顶部大于等于 1920px 的范围。
当页面滚动到顶部、中间或底部位置时，对应的侧边按钮（即，顶部、中间或底部按钮）添加激活样式（即 .active-color），其余按钮样式变为默认（即 .default-color）。

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

四、代码

index.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>

css/style.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;
}

js/index.js

$(window).scroll(function () {
  // 页面滚动到指定范围，对应的侧边按钮字体变色
  // TODO：请补充代码实现功能
});

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

images/bg.png
在这里插入图片描述

五、知识点

window.pageYoffset 可以获取scroll的y轴
window.pageXoffset 可以获取scroll的x轴
本题已设置了scroll监听，如果用js原生也有个scroll事件可以监听滚动
window.scrollTo(x,y)可以瞬间移动scroll

六、完成

js/index.js

const list = document.getElementsByTagName("a");
$(window).scroll(function () {
  // 页面滚动到指定范围，对应的侧边按钮字体变色
  // TODO：请补充代码实现功能
  clearActive();
  if (0 <= window.pageYOffset && window.pageYOffset < 960) {
    list[0].classList.add("active-color");
  } else if (window.pageYOffset < 1920) {
    list[1].classList.add("active-color");
  } else {
    list[2].classList.add("active-color");
  }
});
function clearActive() {
  for (var i = 0; i < list.length; i++) {
    list[i].classList.remove("active-color");
  }
}
/**
 * @param {Object} scrollTopVal：到达指定位置需要滚动的高度
 * 点击按钮，滚动到指定位置
 */
function toFunction(scrollTopVal) {
  // TODO：请补充代码实现功能
  window.scrollTo(0,scrollTopVal)
}