JS操作滚动条置顶+动画效果
Posted 黑子Kuroko
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS操作滚动条置顶+动画效果相关的知识,希望对你有一定的参考价值。
一、最实用方法:
window.scrollTo(
top: 0,
behavior: "smooth"
);
调用 scrollTo 方法,并设置 behavior 动画效果。等同于自己手动设置元素的 scrollTop = 0
window.scrollTo 说明:
语法1:
window.scrollTo(x-coord,y-coord)
x-coord
是文档中的横轴坐标。y-coord
是文档中的纵轴坐标。
语法2:
window.scrollTo(options)
top
等同于y-coord
- left 等同于
x-coord
behavior
类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
More:
scroll() 此方法接收两个参数,依次为X坐标和Y坐标;设置滚动条的偏移位置
scrollTo() 此方法和scroll()作用一样,都是设置滚动条的偏移位置。
scrollBy() 此法发同样接收两个参数,不过参数分别为X轴的偏移量和Y轴的偏移量,并且可以增加或者减少。
二、最粗暴的方法:
window.scrollTop = 0;
直接设置滚动条高度为0,该方法效果比较突兀,体验不好。
三、自定义方法:
const ScrollTop = (number = 0, time) =>
if (!time)
document.body.scrollTop = document.documentElement.scrollTop = number;
return number;
const spacingTime = 20; // 设置循环的间隔时间 值越小消耗性能越高
let spacingInex = time / spacingTime; // 计算循环的次数
let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
let everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
let scrollTimer = setInterval(() =>
if (spacingInex > 0)
spacingInex--;
ScrollTop(nowTop += everTop);
else
clearInterval(scrollTimer); // 清除计时器
, spacingTime);
;
该方法支持向上和向下滚动
// 滚动到距离页面顶部500px的位置 动画时间为200ms
ScrollTop(500, 200);
转自:原生JS实现滚动条动画 (滚动到指定位置 / 返回顶部)
之前的相关链接:extjs/jquery/js 操作页面滚动条
以上是关于JS操作滚动条置顶+动画效果的主要内容,如果未能解决你的问题,请参考以下文章