js 子盒子在父盒子中平滑滚动到顶部

 话不多说,看图:

 代码:

// 父盒子
let dad= document.getElementById('dad')

// 子盒子
let son= document.getElementById('son')

// 获取dom距离fu顶部的距离
let offset = son.offsetTop - dad.offsetTop;
dad.scrollTo({top: offset, behavior: 'smooth'})

// 短暂变色
son.classList.add('highlighted');

// 移除类 恢复颜色
setTimeout(function () {
    son.classList.remove('highlighted');
}, 600)
.dad {
    transition: color .4s ease-in-out;
}

son.highlighted {
    color: pink;
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值