【js】js和jq实现回顶动画效果和滚动条监听事件详解
js/jq实现回顶动画效果以及滚动条监听事件详解
跟js的第一个用法一样，就是多了定义window
作者：码到成功，一码平川。
在平常的网站中为了优化用户体验，可以说回顶效果是应用最多的js特效了。
废话不多说，直接开门见山。
一.回顶动画效果 1.html代码
Document
//设置页面高度
^//设置回顶按钮
2. js代码
var to_top=document.getElementById("to_top");
to_top.onclick = function() {
// 设置定时器
timer = setInterval(function() {
// 获取滚动条距离顶部的高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
// 越滚越慢，设置成负数是为了防止减不到0
var ispeed =-osTop / 6;
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
if (osTop == 0) {
clearInterval(timer);
}
}, 30);
};
3. jq代码
$("#to_top").click(function(){
$("document,html").animate({scrollTop:0},1000)
})
jq相比于js代码就简单不少
二.滚动条监听事件 1.js实现方法window.onscroll = function() {}
//js本身自有的滚动条监听方法
用法举例：
window.onscroll = function() {
//top_num当前位置距离页面顶部距离
//每次滚动都会重新定义一次当前滚动条距离页面顶部的距离
var top_num= document.documentElement.scrollTop||document.body.scrollTop;
//你现在可以监听滚动条的位置，可以做喝多事情，靠你自己发挥了
}
document.addEventListener(“onscroll”, function (e) {})
//给滚动条添加监听事件
//用法同上
2.jq实现方法 $(window).scroll(function(event){});跟js的第一个用法一样，就是多了定义window
//感谢阅读，希望对于你们有帮助
作者：码到成功，一码平川。
相关文章
Radinka
2021-05-02
Sally
2021-01-16
Amber
2020-02-28
Dior
2021-07-24
Nafisa
2021-06-30
Viridis
2023-07-20
Dara
2023-07-20
Tertia
2023-07-20
Zada
2023-07-20
Rhea
2023-07-20
Lani
2023-07-20
Hazel
2023-07-20
Sue
2023-07-20
Antonia
2023-07-20
Zahirah
2023-07-20
Rae
2023-07-20
Vala
2023-07-20
Bree
2023-07-20
Leona
2023-07-20