整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
用JavaScript实现页面滑动到指定位置加载动画。
若页面滚动到class名为group-pic的元素的位置时开始加载
原理： 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则返回在不同页面中对象的高度值而不是百分比值
用JavaScript实现页面滑动到指定位置加载动画。
若页面滚动到class名为group-pic的元素的位置时开始加载
原理： 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则返回在不同页面中对象的高度值而不是百分比值
看个锚点定位的例子
发现页面唰的一些就到顶部了，快到我们懵逼了。。。
开始解决
CSS属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。
scroll-behavior:smooth 写在滚动容器元素上，可以让容器的滚动变得平滑。
在网页默认滚动是在<html>标签上，移动端大多数在<body>标签上。
我们可以这样加：
html,
body { scroll-behavior:smooth; }
加了以后的效果如下：
这是录制的GIF图，效果没那么好。 大家可以动手试一下，滑动体验非常不错。
兼容性不够好
当然我们可以通过js来做个类似
DOM元素的scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内，通过触发滚动容器的定位实现。
DOM元素的scrollIntoView()方法 是原生JS 兼容到IE6，兼容性非常好。
参数如下
{
behavior: "auto" | "instant" | "smooth", // 默认 auto
block: "start" | "center" | "end" | "nearest", // 默认 center
inline: "start" | "center" | "end" | "nearest", // 默认 nearest
}
解释一下这三个参数：
用法：
html:
<div class="wrap"> <div onClick="onScrollIntoView()">点击让黑色块到顶部</div> <ul class="body"> <li>1</li> <li>2</li> <li id="box">我是黑色</li> <li>3</li> <li>4</li> </ul> </div>
js:
function onScrollIntoView () {
var element = document.getElementById("box");
element.scrollIntoView({behavior: "smooth"});
}
效果：
这回大家再也不用害怕做锚点定位啦。
最后我们在说一个关于页面滚动问题吧，那就是 返回顶部 功能实现
我们常用定时器 setInterval 来不断减去高度。
如：当前距离顶部 1000， 我们每10毫秒减50，
var timer = setInterval(function() { // 定时器 每10毫秒执行一次
// 顶部距离 document.body.scrollTop = 1000
var speed = 50 // 返回顶部速度
document.body.scrollTop = document.body.scrollTop - speed
if (document.body.scrollTop === 0) { // 返回到达顶部后， 销毁定时器
clearInterval(timer)
}
}, 10)
效果：
大家会发现，页面返回是滚动起来很干。 没10毫秒减50. 很平均，在交互上效果并不好。
借鉴上面 scroll-behavior:smooth 的交互效果。 缓动的返回顶部。
改一下计算方式：1000/2 = 500, 500/2 =250, 250/2 = ...... 这样滑动起来是不是就平滑了呢？
换算成公式：开始位置 = 开始位置 + (结束位置 - 开始位置) / 速度
document.body.scrollTop = 1000 + (0 - 1000) / 2
公式太烦了还是上代码吧：
var onTop = function (a, b, c, d) {
if (a == b || typeof a != 'number') {
return
}
b = b || 0
c = c || 2
var speed = function () {
a = a + (b - b) / c
if (a < 1) {
d(b, true)
return
}
d(a, false)
requestAnimationFrame(speed)
}
speed()
}
调用：
var target = document.body.scrollTop ? document.body : document.documentElement
onTop(target.scrollTop, 0, 4, function (value) {
target.scrollTop = value
})
效果：
Ps: gif录制效果不好，大家可以动手写一下DEMO
*请认真填写需求信息，我们会在24小时内与您取得联系。
