JavaScript实现页面到滚动到指定位置执行某些操作
比如 页面中 某个DOM, 希望点击按钮后页面直接跳转到 这个DOM所在的位置,
1. 获取DOM离屏幕的高度
var hTop = $('#box').offset().top;
$('body,html').animate({
scrollTop:hTop
},100);
2. 通过原生的方式跳转到某个 地方
var hTopDom = document.getElementById('box');
var hTop = hTopDom.offsetTop;
document.documentElement.scrollTop = hTop;
跳转的时候没有动画的效果
关于浏览器的 各种高度问题 汇总:
https://blog.csdn.net/semanwmj/article/details/7072795
https://blog.csdn.net/u014304657/article/details/76854064
https://www.cnblogs.com/fnz0/p/5510758.html
JavaScript实现页面到滚动到指定位置执行某些操作的更多相关文章
- jquery滚动到指定位置
利用jquery实现页面可视区滚动到指定位置.直接上代码 //滚动到指定位置 function scrollTo(element,speed) { if(!speed){ speed = 300; } ...
- scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置
scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...
- selenium webdriver——JS滚动到指定位置
1.DOM滚动方法 1.scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...
- 利用jquery制作滚动到指定位置触发动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...
- 自定义ScrollViewer的Touch事件--触摸上下移动ScrollViewer滚动到指定位置
double mPointY;//触摸点的Y坐标 double mOffsetY;//滚动条当前位置 bool mIsTouch = false;//是否触摸 //触摸事件 private void ...
- 通过scrollTop,使子元素滚动至指定位置
想实现这样的一个功能,点击子元素,让元素滚动至指定位置,怎么实现呢? 在代码实现之前,先了解下相关关键点. 1.scrollHeight 属性 通过 scrollHeight 属性可获得子元素的滚动高 ...
- js滚动到指定位置
序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...
- ios开发之--令UITableView滚动到指定位置
这个应用场景还是挺多的,代码如下: //获取到需要跳转位置的行数 NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow: inSect ...
- Vue如何引入jquery实现平滑滚动到指定位置效果
在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
随机推荐
- Navicat导出数据库结构为PDF
1.选中需要导出的数据表,右键选择 打印表 2.点击左上角 打印,选择标红的打印机,点击确定,然后键入文件名,确定之后会生成后缀为xps的文件 3.然后打开这个网址(https://xpstopdf. ...
- js 正则表达式学习笔记
正则表达式正则表达式是由一个字符序列形成的搜索模型 语法new RegExp("[abc]")/[abc]//正则表达式主体/修饰符(可选) 1.修饰符i 忽略大小写g 执行全局匹 ...
- 最短路(floyd/dijkstra/bellmanford/spaf 模板)
floyd/dijkstra/bellmanford/spaf 模板: 1. floyd(不能处理负权环,时间复杂度为O(n^3), 空间复杂度为O(n^2)) floyd算法的本质是dp,用dp[k ...
- 社交系统ThinkSNS+在研发过程中,如何做到 Laravel 配置可以网站后台配置
什么是ThinkSNS+ ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案. 本文分享下利用 Laravel 的 Bootstrapp ...
- 在Centos中安装HustOJ实验记录
hustoj是目前使用最广泛的刷题平台,自建平台是编程教学中重要一环,教,学,测,反思形成闭合回路.目前利用现有的服务器资源,建成了开高开源code中心,一个刷题系统,六月再建一个私有云,私有云不仅是 ...
- Oracle共享服务器的连接模式
一般Oracle数据库安装默认都是选择专用服务器模式的连接方式,但实际上Oracle也支持共享服务器的连接模式,不过这种在实际生产中见到的很少,我个人只在一些医院行业的客户生产环境中见到过这类配置. ...
- MyEclipse 2016CI破解版for Mac
网上的教程很多,一开始怎么都不行,就是不行,也是如此操作,可能是注册机失效了还是怎样,数个小时过去了,我综合了网上的资源,终于OK啦!(我会在文后给出jar 包,注册机的破解文件,以及MyEclips ...
- rand()函数的用法
C++中rand() 函数的用法 1.rand()不需要参数,它会返回一个从0到最大随机数的任意整数,最大随机数的大小通常是固定的一个大整数. 2.如果你要产生0~99这100个整数中的一个随机整数, ...
- [Android]解决 Could not read entry xxx from cache taskArtifacts.bin
Bug 出现 事情是这样的,昨天早晨我正做着项目,坐在我旁边的小伙伴呼唤了我一下,说项目运行不起来了. 我纳闷着,前天的时候还好好的,怎么过了一晚就出问题了.我问他是不是改了什么配置,或者添加了什么东 ...
- 题解 P1004 方格取数
传送门 动态规划Yes? 设i为路径长度,(为什么i这一维可以省掉见下)f[j][k]表示第一个点到了(j,i-j),第二个点到了(k,j-k) 则 int ji=i-j,ki=i-k; f[j][k ...