Javascript设置滚动条向上滚动的方法；JS设置滚动条滚动的代码

很久就没有碰前端的后果就是，自己被公司叫来帮忙自己结果啥都会，但是就想不起怎么操作

画布哆嗦

咱们直接来看代码

重点一：获取滚动条Y轴的数据

这个方法有很多，我就不一一讲述了，毕竟结果都一样就好

直接上代码

var scrollTop = 0;
window.onscroll = function () {scrollTop = document.documentElement.scrollTop || document.body.scrollTop;console.log(scrollTop);
}

window.onscroll是为了监听当前页面的滚动条，当滚动时执行后面的函数

为什么会有documentElement和body呢？

这是因为谷歌浏览器是通过前者获取滚动条位置的，而其他浏览器是通过后者获取的，考虑到兼容性的问题所以才这么做的；

来看结果

重点二：设置滚动条滚动

咱们获取滚动条的数据自然是有用的，我这里就只展示让滚动条向上滚动的代码

无动画滚动

这个就很简单粗暴，直接嗖的一下到顶了代码也很简单

window.scrollTo(0,0);

没错代码就是这么简单

document.documentElement.scrollTop = 0；
document.body.scrollTop = 0；

当然你这样写也是没问题的，但是要注意兼容性所以两个都要写上

有动画滚动

有动画就要多一点点代码，我这里用到的时定时器，所以性能方面就会受到些影响

相信大家都能看得懂，我就不解释了；当然看不懂的话也可以私信我，我有时间会跟你讲讲一定要打好基础

var timber = setInterval(() => {window.scrollTo(0, scrollTop-=20);if(scrollTop <= 0){clearInterval(timber);}}, 5);

简简单单、轻轻松松；

随便转载，注明原著即可；

Javascript设置滚动条向上滚动的方法；JS设置滚动条滚动的代码相关推荐

java 页签标题名的设置_javascript修改浏览器title方法 JS动态修改浏览器标题
title在html中属于特殊的节点元素.因为它可以使用document.getElementsByTagName("title")[0]来获取网页的title标签,但却无法用do ...
2k19一直显示储存到服务器,NBA2K19画面设置保存不了解决方法_NBA2K19设置保存不了怎么办_玩游戏网...
<NBA2K19>与前几代一样,PC版都有修改设置后不能保存的毛病,既然问题出现那就不要担心了,我们一起来看看如何解决? 为什么无法保存设置好的画质,退出游戏再进去还是原来系统默认的画质, ...
ios8在通用设置中文键盘无效的解决方法(中文键盘设置)
product - scheme - Edit scheme - run - options - application Region选项改为"中国"然后->在通用设置下键盘 ...
JavaScript: 最简单的事件代理（JS Event Proxy）原理代码
打开 http://jsbin.com (JS练兵场),方便尝试使用案例代码. 假设有HTML <ul id="parent-list"><li id=" ...
MFC 热键设置 OnHotKey方法和Accelerator方法的设置
写MFC程序时,如果想自定义热键比如ALT+S可以采用下面两种方法: 方法一:定义热键的消息响应函数:OnHotKey 定义系统全局热键: 1.首先在.h文件中添加消息响应函数声明 afx_msg L ...
FANUC机器人_三点法设置工具坐标系的具体方法步骤（图文）
FANUC机器人_三点法设置工具坐标系的具体方法步骤设置步骤可参考如下: 如下图所示,按下MENU键,选择"设定"-"坐标系"进入设置画面,
win7桌面的计算机在哪里设置密码,win7如何添加屏幕保护密码|win7设置屏幕保护密码的方法...
‍‍ 有时我们会为了防止被人看到计算机上的信息,会设置开机登录密码来保护我们的信息安全.但是有时我们只是离开计算机一小会,那我们可以设置屏幕保护密码来保护计算机,那么win7如何添加屏幕保护密码呢?下 ...
03全局类IMApplication添加操作联系人（好友）列表的方法和设置用户名和密码的方法
1.关于操作联系人(好友)列表: 就是一个field和他的setter,getter: private Map<String, User> contactList; public Map& ...
多御安全浏览器锁屏功能上线，详解设置浏览器锁屏的方法
2022年8月13日,多御安全浏览器锁屏功能正式上线啦!此次最新版本android版 1.7.5增加了密码锁屏功能,旨在保护用户的隐私安全和数据安全,让隐私保护更进一步.那么这个锁屏功能在哪里,我们应 ...
html如何设置边框为圆点虚线,如何设置html虚线边框的方法
如何设置html虚线边框的方法如何设置html虚线边框的方法用到CSS样式和HTML标签元素为了对html不同标签加边框虚线,我们选择几个常用标签对齐设置边框虚线效果. 1.html常用标签 p ...