一、介绍
日常浏览网页的时候,我们会发现一个问题,当页面太长、内容太多的时候我们很难快速浏览到心仪的内容。为了解决这个烦恼,优秀的产品研发团队发明了一种类似传送门的功能,以便用户能通过它快速定位到感兴趣的内容。这个功能也被通俗地比喻为“电梯”。
本题需要在已提供的基础项目中使用 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文章来源地址https://www.toymoban.com/news/detail-478602.html
$(window).scroll(function () {
// 页面滚动到指定范围,对应的侧边按钮字体变色
// TODO:请补充代码实现功能
});
/**
* @param {Object} scrollTopVal:到达指定位置需要滚动的高度
* 点击按钮,滚动到指定位置
*/
function toFunction(scrollTopVal) {
// TODO:请补充代码实现功能
}
images/bg.png
文章来源:https://www.toymoban.com/news/detail-478602.html
五、知识点
- 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)
}
到了这里,关于javaScript蓝桥杯---传送门的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!