当前位置:网站首页>Click back to the top JS
Click back to the top JS
2022-07-29 02:09:00 【kilito_ 01】
gotopping() {
clearInterval(this.timers);
this.timers = setInterval(() => {
let curHeight = document.documentElement.scrollTop || document.body.scrollTop;
var now = curHeight;
// Speed = 0 - The height of the roll except 7 It's a negative number
var speed = (0 - now) / 7;
// Whether the speed value is greater than 0 Greater than 0 Rounding up Less than 0 Rounding down
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// Here, judge whether the value of the last scroll to the top is 0 by 0 It means that you have reached the top and don't need to scroll up Clear timer Hide the scroll button
if (curHeight == 0) {
clearInterval(this.timers);
this.toTop = false;
}
// Scroll up the scroll bar Even if the value is negative Finally, the value obtained is 0
document.documentElement.scrollTop = curHeight + speed;
document.body.scrollTop = curHeight + speed;
// Stop scrolling Why not
this.stop = false;
}, 30);
},
// Listen to the function when scrolling up
needToTop() {
// compatible ie and chrome Writing ie Only body attribute chrome Only docmengElement attribute
let curHeight = document.documentElement.scrollTop || document.body.scrollTop;
// Determine whether there is a scroll bar If so, the back to top button is displayed Otherwise hide
if (curHeight == 0) {
this.toTop = false;
} else {
this.toTop = true;
}
// If there is a drop-down behavior Just clear the timer
if (this.stop) {
clearInterval(this.timers);
}
this.stop = true;
},
边栏推荐
- [golang] synchronization lock mutex
- Stonedb invites you to participate in the open source community monthly meeting!
- leetcode/和为k的连续子数组个数
- Number of consecutive subarrays with leetcode/ and K
- Use of packet capturing tool Charles
- [7.21-26] code source - [good sequence] [social circle] [namonamo]
- [the road of Exile - Chapter 5]
- Mathematical modeling -- cold proof simulation of low temperature protective clothing with phase change materials
- Using local cache + global cache to realize user rights management of small systems
- 给LaTeX公式添加优美的注解;日更『数据科学』面试题集锦;大学生『计算机』自学指南;个人防火墙;前沿资料/论文 | ShowMeAI资讯日报
猜你喜欢

Lxml web page capture the most complete strategy

Force deduction brush question (2): sum of three numbers

【流放之路-第五章】

基于 ICA 与 DL 的语音信号盲分离

druid. The performance of IO + tranquility real-time tasks is summarized with the help of 2020 double 11

Solution of Lenovo notebook camera unable to open

【流放之路-第八章】

(arxiv-2018) 重新审视基于视频的 Person ReID 的时间建模

IDEA 连接 数据库

Thirty years of MPEG audio coding
随机推荐
Anti crawler mechanism solution: JS code generates random strings locally
Mathematical modeling -- cold proof simulation of low temperature protective clothing with phase change materials
What is a proxy server? [2022 guide]
Sigma-DSP-OUTPUT
ciscn 2022 华中赛区 misc
12.< tag-动态规划和子序列, 子数组>lt.72. 编辑距离
弹性布局 单选
Cookie和Session
Semiconductor chip industry chain
Implementation of 10m multifunctional signal generator with FPGA
数学建模——派出所选址
Planning mathematics final exam simulation II
Mathematical modeling -- Optimization of picking in warehouse
Qt源码分析--QObject(4)
Why does stonedb dare to call it the only open source MySQL native HTAP database in the industry?
[the road of Exile - Chapter 4]
JS dom2 and dom3
Establish an engineering template based on STM32 in keil -- detailed steps
Promise solves asynchrony
Lm13 morphological quantification momentum period analysis