JS的scrollIntoView简单使用
scrollIntoView方法滚动当前元素,进入浏览器的可见区域
el.scrollIntoView(); // 等同于el.scrollIntoView(true)
el.scrollIntoView(false);
该方法可以接受一个布尔值作为参数。
如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);
如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。
如果没有提供该参数,默认为true。
锚点定位是一个再熟悉不过的操作了,通常会用a标签href=#XX去实现,不过这样做,有一个问题,就是页面会有刷新感,而且地址栏会有变化,F5刷新,则#XXX还是显示在地址栏里,这样如果要进一步进行有关地址栏url的操作,就不得不再做些判断,所以寻找一些新的方法。如果要求不是很高,scrollIntoView()这个方法就可以取代传统锚点定位,它是利用滚动原理,来将相应的元素滚动到可是区域内。接下来看看详细的介绍。
首先需要说明的是,这个方法并没有写入标准,但是大多数主流浏览器已经支持或部分支持其功能了,所以可以放心使用,当然如果有朝一日标准出来了,那就按标准来吧。其次要说明的是,这是js原生方法,jquery等框架是使用不了的,所以,获得元素的方法一定是document.getElementById或querySelector,然后才可以点出来scrollIntoView()方法。
官方参数
参数介绍:直接上官方看api介绍比较清晰(https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView)
使用介绍
页面一定要能滚动,这个方法才会生效,否则,你让我如何给你滚动呢?
//这个title-part元素将以平滑的滚动方式滚动到与视口底部齐平地方(有兼容性问题)
document.querySelector("#title-part").scrollIntoView({
block: 'end',
behavior: 'smooth'
}) //这个article-part元素将以平滑的滚动方式滚动到与视口顶部齐平地方(有兼容性问题)
document.querySelector("#article-part").scrollIntoView({
block: 'start',
behavior: 'smooth'
}) //这个articleMU-part元素将木讷的瞬间滚动到与视口顶部齐平地方(无滚动动画效果)
document.querySelector("#articleMU-part").scrollIntoView();//默认值就是true,可以不写 //这个titleMU-part元素将木讷的瞬间滚动到与视口底部齐平地方(无滚动动画效果)
document.querySelector("#titleMU-part").scrollIntoView(false)
JS的scrollIntoView简单使用的更多相关文章
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- [转]九个Console命令,让js调试更简单
转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...
- JS实现的简单横向伸展二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
- JS代码的简单重构与优化
JS代码的简单重构与优化(适合新手) 原文 http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) ...
- JS+html实现简单的飞机大战
摘要:通过原生的js+html实现简单的飞机大战小游戏效果,如图所示: 实现代码如下: 1.自己的飞机实现 飞机html: <!DOCTYPE html> <html lang=&q ...
- swfobject.js 2.2简单使用方法
swfobject.js 2.2简单使用方法 官方网址介绍http://code.google.com/p/swfobject/wiki/documentation 用法:html部分<div ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
随机推荐
- makefile 必知必会以及Makefile是怎样炼成的
Make必知必会原文链接 Makefile 必知必会 Makefile的根本任务是根据规则生成目标文件. 规则 一条规则包含三个:目标文件,目标文件依赖的文件,更新(或生成)目标文件的命令. 规则: ...
- 堆排序的C++代码实现
堆排序C++实现 堆排序的具体思路可以查看<算法导论>这本书,一下只提供笔者的C++实现代码,并且将笔者在编写程序的过程当中所遇到的一些细节问题拿出来作一番解释,希望能够对对堆排序有一个透 ...
- oracle创建透明网关出现的问题
解决方案:创建HS_TRANSACTION_LOG表 DROP TABLE HS_TRANSACTION_LOG go CREATE TABLE HS_TRANSACTION_LOG( GLOBAL_ ...
- Serilog中的Jobject/Jtoken对象序列化的问题
今天使用Serilog打印object对象的时候,发现Jtoken对象输出成 [[[]] 这种形式了,本来以为是传入参数的问题,确认了几遍后发现确实是Serilog输出的问题.github上也有人提出 ...
- stm-ledstrip : Driver and test routine for WS2811 RGB-LED
stm-ledstrip : Driver and test routine for WS2811 RGB-LED #include "ws2812.h" #include < ...
- asp.net core读取appsettings.json,如何读取多环境开发配置
摘要 在读取appsettings.json文件中配置的时候,觉得最简单的方式就是使用asp.net core注入的方式进行读取了. 步骤 首先根据配置项的结构定义一个配置类,比如叫AppSettin ...
- Task Parallel Library01,基本用法
我们知道,每个应用程序就是一个进程,一个进程有多个线程.Task Parallel Library为我们的异步编程.多线程编程提供了强有力的支持,它允许一个主线程运行的同时,另外的一些线程或Task也 ...
- 【mybatis】mybatis进行批量更新,报错:com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right
使用mybatis进行批量更新操作: 报错如下: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an erro ...
- Tomcat集群下获取memcached缓存对象数量,统计在线用户数据量
项目需要统计在线用户数量,系统部署在集群环境下,使用会话粘贴的方式解决Session问题.要想得到真实在线用户数,必须是所有节点的总和. 这里考虑使用memcached存放用户登录数据,key为use ...
- 超人前传第一至十季/全集Smallville迅雷下载
超人前传 第一至十季 Smallville Season 1-10 (2001-2010)本季看点:CW台的长寿剧<超人前传>在以帅哥靓女征服观众了这么多年后,也终于进入尾声,该剧将于今年 ...