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项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
随机推荐
- debian 7上源码编译MongoDB 3.4版本
此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 要想精通一个数据库,除了知道该数据库的功能特性.使用方法等,还需要能够看懂数据库源码,能够使用gdb工具对其 ...
- 从头开始学Web开发—CSS_01
CSS导入使用及引用的两种方法: 外部引用 外部引用的方式,我们直接可以通过link标签来引用我们写好的一个CSS文件: 在link 标签中,我们通过rel = "stylesheet&qu ...
- python2与python3 版本区别
目录 编码 输入输出 中文 除法 长整形 内置函数map xrange init reduce 字符串类型 dict字典 经典类 新式类 未完待补充 编码 python2默认编码器为ascii码(只支 ...
- 剑指Offer的学习笔记(C#篇)-- 求1+2+3+...+n
题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 一 . 直接解题吧 芽儿呦,突然觉得,我不说! ...
- CodeForces - 296A-Yaroslav and Permutations(思维)
Yaroslav has an array that consists of n integers. In one second Yaroslav can swap two neighboring a ...
- 【NOI2014】起床困难综合症 贪心
从高到低按位贪心,讨论一下初始0或1,分别暴力算出结果是什么 如果一开始0就能得1当然直接ans垒起来 如果1能得1而且当前m够用,那也垒起来,同时m减掉 否则gg 2min的代码 #include ...
- 健康检查NET Core之跨平台的实时性能监控
ASP.NET Core之跨平台的实时性能监控(2.健康检查) 前言 上篇我们讲了如何使用App Metrics 做一个简单的APM监控,最后提到过健康检查这个东西. 这篇主要就是讲解健康检查的内 ...
- UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 9865: illegal multibyte sequence 解决办法
解决办法 ; a=r.text.replace('\xa0',' ') 详情参见https://stackoverflow.com/questions/10993612/python-removing ...
- P4869 罪犯分组
思路: 明显的dp,虽然我想到了二进制模拟,想到了转移,但还是先看了题解,原来真是这样,,,,不是第三题吗? 用f[i]表示,对于前i个罪犯最少需要分几组. 对于每个状态用二进制表示,第i位上1,0表 ...
- Spring 设计原则
Spring 框架有四大原则(Spring所有的功能和设计和实现都基于四大原则): 1. 使用POJO进行轻量级和最小侵入式开发. 2. 通过依赖注入和基本接口编程实现松耦合. 3. 通过AOP和基于 ...