JavaScript-如何实现滚动页面到指定位置？

lement.scrollIntoView()

直接上例子代码给大家一点参考:

<html>
  <style>
    span {
      display: block;
      height: 150%;
    } /*整点上下的空白 */
  </style>
  <body>
    <button id="from">点击我</button>
    <span></span>
    <div id="to">滚动到这:头条@plzbefat</div>
    <span></span>
  </body>
  <script>
    document.getElementById("from").addEventListener("click", () => {
      document.getElementById("to").scrollIntoView({
        behavior: "smooth", //顺滑的滚动
      });
    });
  </script>
</html>

整点例子没毛病

语法

element.scrollIntoView(); // 等同于element.scrollIntoView(true) 滚动 元素在顶部
element.scrollIntoView(false); // 滚动 元素在底部
element.scrollIntoView(option); //参数

参数

alignToTop:

如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。

tml页面设置动态金额滚动效果！

一开始加载页面，数字都会过渡滚动到具体数字上！

代码：

html:

css:

js:

用JavaScript实现页面滑动到指定位置加载动画。

若页面滚动到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则返回在不同页面中对象的高度值而不是百分比值

在线咨询

上一篇：前端常见面试题之display:none和visibility:hidden的区别
下一篇：赶紧收藏，头条超详细Web前端入门到精通必学的标签及属性大全

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript-如何实现滚动页面到指定位置？

lement.scrollIntoView()

语法

参数

您的项目需求