js收藏展开与隐藏,返回顶部

本文介绍了一种使用JavaScript来控制页面元素显示隐藏及滚动动画的方法。通过监听按钮点击事件,实现特定元素的显示与隐藏,并利用requestAnimationFrame实现平滑滚动效果。

var a = document.getElementById("more");
var b = document.getElementById("moreList");
var c = document.getElementById("MOREall");
a.onclick = function(){
c.style.display="block";
b.style.display="block";
a.style.display="none";
};
// 动画效果
var timer = null;
b.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
};
// 直接回到顶部
// b.onclick = function () {
// var top = document.body.scrollTop || document.documentElement.scrollTop;
// scrollBy(0,-top)
// };

转载于:https://www.cnblogs.com/jjxhp/p/8696136.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值