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项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
随机推荐
- day02-HTML(2)
一.新知识 1. !+tab html5的标签结构 2. Charset 编码 Ascll Ansi Unicode Gbk Gb2312 Big5 Utf-8 通用字符集 3.关 ...
- 【读后感1】SQL2008技术内幕- SQL逻辑查询处理
引言观点 1. 编程语言日新月异,但是从没有人否定sql 在现代编程中的巨大作用和 持续的可利用性.SQL以对人类友好的阅读体验提供数据查询能力( 相比其他编程语言 ), 同时在各种数据库平台中,基础 ...
- Unity 5.6中的混合光照(下)
https://mp.weixin.qq.com/s/DNQFsWpZm-ybIlF3DTAk2A 在<Unity 5.6中的混合光照(上)>中,我们介绍了混合模式,以及Subtracti ...
- 【NOIP模拟赛】密码锁
题目描述 hzwer有一把密码锁,由N个开关组成.一开始的时候,所有开关都是关上的.当且仅当开关x1,x2,x3,…xk为开,其他开关为关时,密码锁才会打开. 他可以进行M种的操作,每种操作有一个si ...
- mac搭建TensorFlow环境
1.首先安装Anaconda,下载地址:https://www.anaconda.com/download/#macos,根据需要下载所需的版本. 2.安装TensorFlow,安装命令:pip in ...
- 长春理工大学第十四届程序设计竞赛(重现赛)H.Arithmetic Sequence
题意: 数竞选手小r最喜欢做的题型是数列大题,并且每一道都能得到满分. 你可能不相信,但其实他发现了一个结论:只要是数列,无论是给了通项还是给了递推式,无论定义多复杂,都可以被搞成等差数列.这样,只要 ...
- zabbix agent 配置
http://blog.csdn.net/z644041867/article/details/76618644 https://www.cnblogs.com/miclesvic/p/6144924 ...
- Django使用网站图标
默认情况下,浏览器访问一个网站的时候,同时还会向服务器请求“/favicon.ico”这个URL,目的是获取网站的图标. 若是没有配置的话,Django就会返回一个404错误,并且浏览器接收到这个40 ...
- leecode-39. Combination Sum
1.问题描述: Given a set of candidate numbers (C) (without duplicates) and a target number (T), find all ...
- C# 实现Tree,包含parentId和children
1.先定义一个类型 public class Node { [JsonProperty(PropertyName = "id", NullValueHandling = NullV ...