成都网站建设设计

将想法与焦点和您一起共享

js浏览器滚动条卷去的高度scrolltop(实例讲解)

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;

scrollTop最经典的应用就是回到顶部,下面代码如下: 




  
  Title
  


GO
//A标签本身是跳转页面的,把跳转的地址写在href这个属性中
/*
  1)、不写值的话是刷新本页面
  2)、写的如果是#target,是锚点定位,定位到当前页面Id为target这个位置
  3)、“javascript:”这样写是取消A标签默认跳转的行为
*/


以上这篇js浏览器滚动条卷去的高度scrolltop(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。


名称栏目:js浏览器滚动条卷去的高度scrolltop(实例讲解)
分享链接:http://chengdu.cdxwcx.cn/article/jsscis.html