您的位置:首页 > 数码常识数码常识

js左右滚动到指定位置操作方法(js控制页面滚动到指定位置)

2025-05-13人已围观

js左右滚动到指定位置操作方法(js控制页面滚动到指定位置)
  使用JavaScript实现页面滑动到指定位置加载动画。

  js控制页面滚动到指定位置

  若页面滚动到class名为group-pic的元素的位置时开始加载

  $(document).ready(function(){var a,b,c;a=$(window).height(); //浏览器窗口高度var group=$(".group-pic");$(window).scroll(function(){b=$(this).scrollTop(); //页面滚动的高度c=group.offset().top; //元素距离文档(document)顶部的高度if(a+b>c){...}else{...}});});

  原理: 1.获取浏览器窗口的高度;

  2.获取页面滚动的高度;

  3.获取页面距离文档(document)顶部的高度

  offset().top具体指的是距哪里的高度呢?

  一些获宽高度的属性:

  网页可见区域宽: document.body.clientWidth;

  网页可见区域高: document.body.clientHeight;

  网页可见区域宽: document.body.offsetWidth (包括边线的宽);

  网页可见区域高: document.body.offsetHeight (包括边线的宽);

  网页正文全文宽: document.body.scrollWidth;

  网页正文全文高: document.body.scrollHeight;

  网页被卷去的高: document.body.scrollTop;

  网页被卷去的左: document.body.scrollLeft;

  网页正文部分上: window.screenTop;

  网页正文部分左: window.screenLeft;

  屏幕分辨率的高: window.screen.height;

  屏幕分辨率的宽: window.screen.width;

  屏幕可用工作区高度: window.screen.availHeight;

  屏幕可用工作区宽度:window.screen.availWidth;

  obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

  obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

  obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

  obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

  1.offsetTop : 当前对象到其上级层顶部的距离.

  不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

  2.offsetLeft : 当前对象到其上级层左边的距离.

  不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

  3.offsetWidth : 当前对象的宽度.

  与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

  4.offsetHeight : 与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

  上面就是小居数码小编今天给大家介绍的关于(js控制页面滚动到指定位置)的全部内容,希望可以帮助到你,想了解更多关于数码知识的问题,欢迎关注我们,并收藏,转发,分享。

  94%的朋友还想知道的:

  微信聊天记录电脑文件夹位置说明(微信聊天记录在电脑哪个文件夹)

  PDF转换Word文件的操作方法(pdf最简单的转换word方法)

  小智桌面怎么更改截图保存位置(小智桌面截图后保存位置在哪里)

  3种方法解决(excel删除文本中任意位置所有空格怎么弄)



  155177
 

很赞哦! ()

随机图文