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项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
随机推荐
- Keras输出每一层网络大小
示例代码: model = Model(inputs=self.inpt, outputs=self.net) model.compile(loss='categorical_crossentropy ...
- 洛谷 P3372 【模板】线段树 1
P3372 [模板]线段树 1 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别 ...
- django后台管理系统(admin)的简单使用
目录 django后台管理系统的使用 检查配置文件 检查根urls.py文件 启动项目,浏览器输入ip端口/admin 如: 127.0.0.1/8000/admin 回车 注册后台管理系统超级管理 ...
- django视图 CBV 和 FBV
目录 视图 CBV 和 FBV 什么是视图? FBV function based view 基于函数的视图 CBV class based view 基于类的视图 小技巧 CBV 如何获取页面请求类 ...
- cinder存储服务
一.cinder 介绍: 理解 Block Storage 操作系统获得存储空间的方式一般有两种: 1.通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接裸硬盘,然后分区.格式化.创建文件系 ...
- 用IDEA写出第一个java web
今天学习到如何创建新的java web,笔者使用的是IDEA,以下有详细的参考链接,如下: 参考链接:https://blog.csdn.net/zhdkong/article/details/789 ...
- link-1-STL 标准模板库
STL(Standard Template Library,标准模版库)是C++语⾔言标准中的重要组成部分.STL以模板类和模版函数的形式为程序员提供了了各种数据结构和算法的实现,程序员吐过能够充分的 ...
- 使用JSONPath
SONPath是查询JSON对象元素的标准方法.JSONPath使用路径表达式来导航JSON文档中的元素,嵌套元素和数组.有关JSON的更多信息,请参阅JSON简介. 使用JSONPath访问JSON ...
- code blocks无法输出中文解决方法
是CodeBlocks编译器设置问题,在CodeBlocks菜单 settings -> compiler and debugger settings -> global compiler ...
- bzoj 5337 [TJOI2018] str
bzoj 5337 [TJOI2018] str Link Solution 水题 直接 \(f[i][j]\) 表示以第 \(i\) 位为结束位置,当前已经匹配了前 \(j\) 个氨基酸的方案数 使 ...