原生js 平滑滚动到页面的某个位置
window.scrollTo()
语法1:
window.scrollTo(x-coord,y-coord)
x-coord是文档中的横轴坐标。y-coord是文档中的纵轴坐标。
例子:
window.scrollTo(0,1000); // 垂直滚动到1000的位置
语法2:
window.scrollTo(options)
top等同于y-coord- left 等同于
x-coord behavior类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
例子:
window.scrollTo({
top: 1000,
behavior: "smooth"
});
如果某个元素滚动到某个位置,也可以用以上方法:
document.querySelector('.className').scrollTo()

原生js 平滑滚动到页面的某个位置的更多相关文章
- js平滑滚动到顶部,底部,指定地方
[原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
- ScrollTo:实现平滑滚动到页面指定位置
ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...
- html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
- vue使用原生js实现滚动页面跟踪导航高亮
需要使用vue做一个专题页面. 滚动页面指定区域导航高亮. BetterScroll:可能是目前最好用的移动端滚动插件 如何自定义CSS滚动条的样式? 监听滚动页面事件,对比当前页面的位置与元素的位置 ...
- 原生js判断手机端页面滚动停止
var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...
- ScrollTo:平滑滚动到页面指定位置
使用方法 1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js&q ...
- JQuery插件:ScrollTo平滑滚动到页面指定位置
1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...
- 【web性能】js应该放在html页面的什么位置
所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容. 外部JS的阻塞下载 所有浏览器在下载JS的 ...
随机推荐
- Oracle批量更新数据,使用begin end
/* 使用begin end批量更新 注意end后面必须使用;结束 并且每条update语句都要用;来结束 所以close为;END; 是为了补全语法 */ <foreach collectio ...
- 8. EVENTS
8. EVENTS EVENTS表提供有关事件管理器事件的信息,这将在"使用事件调度程序"中讨论. EVENTS表有以下列: - EVENT_CATALOG:事件所属目录的名称.这 ...
- dell服务器快速设置idrac
前提:将服务器专用的idrac网络接口,连接到网络上 1.登录到服务器(即被监控的服务器). 2.安装客户端工具 yum install OpenIPMI OpenIPMI-devel OpenI ...
- CentOS7安装Tomcat9并配置
划重点:安装tomcat之前必须先安装jdk 安装教程 1.下载 Tomcat 9 CentOS 7 下创建目录并下载文件:// 链接已更新 cd /usr/local/ mkdir tomcat ...
- ARM Linux 3.x的设备树(Device Tree)(转)
http://blog.csdn.net/21cnbao/article/details/8457546
- MySQL数据类型与操作
内容提要: 建表完整语法规范(create table 表格(字段名1 类型 (宽度) 约束条件)) MySQL数据库数据类型(整型.浮点型.字符类型(char与varchar).日期类型.枚举与集合 ...
- LeetCode(52) N-Queens II
题目 Follow up for N-Queens problem. Now, instead outputting board configurations, return the total nu ...
- Uncaught ReferenceError: 板栗 is not defined at HTMLButtonElement.onclick (view:1)
对JS传值一直以为都是随便传过去就行,直到今天遇到了中文传值的问题 中文传值不能够需要在调用的位置加 对于要传的值加单引号或者双引号 比如说下面这个样子,我这里还还记反斜杠注释 '<button ...
- angular2 启动步骤
以下内容转自网络 1. 创建项目文件夹 创建一个新的文件夹来保存你的项目,比如一开始有个self就好了 2.安装基础库 首先确保已经安装了node.js 我们使用 npm package manage ...
- CodeForces 22、23部分题解
CodeForces 22A 找严格第二小的...注意只有一种情况,可以sort排序然后unique输出. int a[N]; int main() { int n; while(~scanf(&qu ...