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项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
随机推荐
- 如何让div中的span垂直居中 ----height:100%设置div的高度
如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...
- PhpStorm之三种视图模式
全屏模式 允许你使用整个屏幕编写代码,在视图中移除了所有菜单,同样也移除了操作系统控制栏.然而,你可以继续使用右键菜单和快捷键.当你把鼠标悬停到屏幕顶部时仍然可以看到主菜单. 演示模式 这个模式和全屏 ...
- 3dmax————
去掉阴影 建模中去掉阴影,有时候阴影会挡住视野 , 显示法线 转到可编辑网格,选择面,选择 ,注意下面那个比例调大点,否则看不清楚
- SpringBoot(1)—启动原理之SpringApplication对象的创建
创建SpringApplication对象 SpringBoot版本为 2.1.1.RELEASE @SpringBootApplication public class SpringbootDemo ...
- HTML+CSS注意点
1. 对于中文网页,需要在header中使用<meta charset="utf-8">声明编码,否则会出现乱码. 2. 属性 属性 描述 class 为html元素定 ...
- NET Core + Angular 2
ASP.NET Core + Angular 2 Template for Visual Studio 2017-01-11 08:45 by 小白哥哥, 2069 阅读, 19 评论, 收藏, 编辑 ...
- Ubuntu里let's encrypt通配符证书的自动续期更新
环境与需求: Ubuntu云服务器上,已经做好了ssl证书的免费申请,但是证书的期限是3个月,3个月到期后必须重新申请或者更新.由于k8s集群里的服务一直在使用证书,每三个月人工更新太麻烦,所以想要配 ...
- Vnc在Ubuntu14.04上的安装和配置 安装:
安装: Ubuntu14.04 : sudo apt-get install vnc4server : sudo apt-get install xrdp iPad : 安装 vnc viewer 或 ...
- 故障案例:主从同步报错Fatal error: The slave I/O thread stops because master and slave have equal MySQL server
https://blog.csdn.net/cug_jiang126com/article/details/46846031
- windows黑窗口关于java程序的常用命令
1.启动java程序 我要运行:E:\code\nhtask下的ElectricEye-0.0.1-SNAPSHOT.jar程序 #切换到程序目录cd E:\code\nhtaskE: java -j ...