回到顶部实例scrollTop

本文介绍了如何利用scrollTop属性实现页面回到顶部的功能。通过设置box.scrollTop为0,可以将滚动条定位到容器顶部。需要注意scrollTop的值存在边界,超出边界设置无效。此外,还提及了与回到顶部相关的计时器和a标签href跳转应用。
摘要由CSDN通过智能技术生成
1、之前我们学习的JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是"只读"属性->只能通过属性获取值,不能通过属性修改元素的样式

2、scrollTop/scrollLeft:滚动条卷去的高度/宽度(这两个属性是唯一"可读写"属性)

       box.scrollTop = 0;       //->直接回到了容器的顶部

    ->我们的scrollTop的值是存在边界值(最大和最小值的),我们设置的值比最小值小或者比最大值大都没用,起到效果的依然是边界的值

    [最小值是零]
       box.scrollTop = -1000;   //->直接回到了容器的顶部,没有超出
       console.log(box.scrollTop);   //->0
    [最大值是=真实的高度-当前容器一屏幕的高度]
       var maxTop = box.scrollHeight - box.clientHeight;
       console.log(maxTop);

插曲:

<!--
    a标签本身是跳转页面的,把跳转的地址写在href这个属性中
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值