JavaScript缓慢滚动到页面顶部——电梯导航栏fixed定位

简介: 当页面内容过多时,浏览网页时滚动距离会变大,当你想回看上面的内容时,需要用鼠标滚轮或拉动滚动条来移动回去。这时如果网页设置电梯导航栏会提高网页阅读的方便性和高效性,我们只需要操作电梯导航栏上面的功能,就能去想要的模块,比如点击返回顶部按钮后会调转到页面顶部。

🚀 题目要求

🚀 什么是电梯导航栏

       当页面内容过多时,浏览网页时滚动距离会变大,当你想回看上面的内容时,需要用鼠标滚轮或拉动滚动条来移动回去。这时如果网页设置电梯导航栏会提高网页阅读的方便性和高效性,我们只需要操作电梯导航栏上面的功能,就能去想要的模块,比如点击返回顶部按钮后会调转到页面顶部。

       如图下京东的电梯导航栏、csdn的电梯导航栏

image.gif

🚀 html代码

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>第三题-返回顶部</title><linkrel="stylesheet"href="css/style.css"></head><body><divclass="main">版心</div><divid="backTop">返回顶部</div><scriptsrc="js/index.js"></script></body></html>

image.gif

🚀 css代码

body{
margin: 0;
padding: 0;
}
.main{
width: 1000px;
margin:0auto;
background-color: pink;
height: 2000px;
font-size: 50px;
line-height: 500px;
text-align: center;
}
#backTop{
display: none;
position: fixed;
left:50%;
margin-left:500px;
bottom:0;
width: 45px;
padding:15px;
background: #000;
color:#fff;
text-align: center;
line-height: 32px;
font-size: 16px;
cursor: pointer;
transition: .5s;
}

image.gif

🚀 js代码

//通过id获取元素backTop// var backTop = ______(1)_______("backTop");varbackTop=document.getElementById("backTop");
//需求:一开始返回顶部不显示 滚动一点之后再显示 点击返回顶部 回到顶部window.onscroll=function () {
//窗体滚动的时候 判断scrollTop如果大于0就显示返回顶部 否则就隐藏// backTop.__(2)____.display =___(3)___.top > 0 ? "__(4)____" : "__(5)_____";backTop.style.display=scroll().top>0?"block" : "none";                  
//document.documentElement.scrollTop也行};
//点击按钮要回去backTop.onclick=function () {
//渐渐的滚回去// var timer = ___(6)____(function () {vartimer=setInterval(function () {
vartarget=0;
//获取页面当前滚动的距离// var leader = ___(3)___.top;varleader=scroll().top;
//document.documentElement.scrollTop也行varstep= (target-leader) /10;
// step = step > 0 ? Math.ceil(step) : ___(7)___(step);step=step>0?Math.ceil(step) : Math.floor(step);
leader=leader+step;
//滚动到leader位置// window.___(8)____(0, leader);window.scrollTo(0, leader);
// if (____(9)_____) {if (leader===0) {
//清除计时器// ____(10)_____;clearInterval(timer);
        }
    }, 15);
};
//封装计算页面当前滚动的距离的函数functionscroll() {
return {
top: window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,
left: window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0    };
}

image.gif

🚀 题目分析

🌍HTML DOM documentElement 属性

image.gif

🌍scrollTop() 方法

image.gif

🌍Window scrollTo() 方法

image.gif

🌍设置计时器,清除计时器

setInterval() 方法

image.gif

clearInterval() 方法

image.gif

🚀 实现效果

image.gif

目录
相关文章
|
3月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
20天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
101 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
18天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
44 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
218 77
|
4月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
118 4
|
4月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
137 2
|
4月前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
80 0
|
4月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
54 0
|
4月前
|
存储 JSON JavaScript
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
58 0
|
5月前
|
JavaScript 前端开发
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中

热门文章

最新文章