DOM元素的距离，制作一个返回顶部的功能

老村长boy

于 2021-05-12 22:09:17 发布

阅读量146

点赞数

文章标签： js html

本文链接：https://blog.youkuaiyun.com/weixin_42689830/article/details/116722706

版权

本文详细介绍了DOM元素的定位方式，包括offsetLeft、offsetTop等属性的使用，以及如何通过getBoundingClientRect获取元素相对于视口的位置。同时，还探讨了页面滚动的相关属性如pageYOffset，并提供了一个返回顶部功能的实现案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM元素的距离

元素的距离
元素.offsetLeft 获取元素到具有定位元素的父级左边的距离没有定位父级找上一级知道浏览器
元素.offsetTop 获取元素到具有定位元素的父级上边的距离

    查找定位父级
    元素.offsetParent

    元素.getBoundingClientRect()获取元素到浏览器窗口的距离

滚动页面距离

        window.pageYOffset   获取页面Y轴滚动距离   IE低版本不支持
        window.pageXOffset

    兼容优
        document.documentElement.scrollLeft   
        document.documentElement.scrollTop


    元素滚动的距离
    元素.scrollTop  元素滚动的高
    元素.scroolLeft  元素滚动的宽   

    自定义窗口距离
    window.scrollTo(x,y)  设置滚动条位置
    window.scroolBy(x,y)  在原有的滚动条位置上添加距离

案例
制作一个返回顶部的功能


```html
   <div class="top">点击返回顶部</div>
    let  GoTop=document.querySelector(".top");
    GoTop.οnclick=function(){
			let y=window.pageYOffset;
			setInterval(function(){
					y=y-100;
					let time=window.scrollTo(0,y);
					if(y<0){
					clearInterval(time);//清除定时器
					}
		},1000/30);
}