比如 页面中 某个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实现页面到滚动到指定位置执行某些操作的更多相关文章

  1. jquery滚动到指定位置

    利用jquery实现页面可视区滚动到指定位置.直接上代码 //滚动到指定位置 function scrollTo(element,speed) { if(!speed){ speed = 300; } ...

  2. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

  3. selenium webdriver——JS滚动到指定位置

    1.DOM滚动方法 1.scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...

  4. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

  5. 自定义ScrollViewer的Touch事件--触摸上下移动ScrollViewer滚动到指定位置

    double mPointY;//触摸点的Y坐标 double mOffsetY;//滚动条当前位置 bool mIsTouch = false;//是否触摸 //触摸事件 private void ...

  6. 通过scrollTop,使子元素滚动至指定位置

    想实现这样的一个功能,点击子元素,让元素滚动至指定位置,怎么实现呢? 在代码实现之前,先了解下相关关键点. 1.scrollHeight 属性 通过 scrollHeight 属性可获得子元素的滚动高 ...

  7. js滚动到指定位置

    序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...

  8. ios开发之--令UITableView滚动到指定位置

    这个应用场景还是挺多的,代码如下: //获取到需要跳转位置的行数 NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow: inSect ...

  9. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

随机推荐

  1. linux抢占式调度

    为什么会发生调度?   因为cpu是有限的,而操作系统上的进程很多,所以操作系统需要平衡各个进程的运行时间 比如说有的进程运行时间已经很长了,已经占用了cpu很长时间了,这个时候操作系统要公平 就会换 ...

  2. Jsoncpp写“鱘”的json数据,报错。

    最近在用Json::FastWriter生成json数据时,发现一个问题.含有“鱘”字的json字段会多出一个斜杠,不知道是不是编码的问题. C++要使用JSON来解析数据,一般采用jsoncpp. ...

  3. 部署开发以太坊dapp的四种方式

    我们已经学习了4种开发和部署智能合约的方法: 第1种是使用 Truffle 和 Ganache .由于我们从上一篇教程中复制了代码,所以我想告诉你,有些插件可用于目前最流行的文本编辑器和 IDEs.有 ...

  4. iOS - 验证输入的是否是正确的身份证号码和手机号码

    - (BOOL)checkIdentityCardNo:(NSString*)cardNo { if (cardNo.length != 18) { return  NO; } NSArray* co ...

  5. Linux 中 ip netns 命令

    通过 ip netns help 可以查看所有关于ip netns的命令: network namespace 在逻辑上是网络堆栈的一个副本,它有自己的路由.防火墙规则和网络设备. ip netns ...

  6. vue中做出购物车的功能

    效果展示: 一:html结构 <div id="buyButton" class="btn-buy"> <button onclick=&qu ...

  7. BZOJ 4551: [Tjoi2016&Heoi2016]树 并查集(&&图论?)

    反向操作,先把所有的标记都打上(记得统计标记的数目),然后依次撤销,合并到自己的上一个点pre,即fa[u]=getf(pre[u]) #include<cstdio> #include& ...

  8. 2017浙江工业大学-校赛决赛 XiaoWei的战斗力

    Description XiaoWei沉迷RPG无法自拔,但是他的战斗力只有5,所以他决定氪金提升战斗力.XiaoWei购买了n个福袋.打开1个福袋后,有以下三种情况出现:1.获得屠龙宝刀,概率为p1 ...

  9. net Core 入门实战

    Asp.net Core 入门实战   Asp.Net Core 是开源,跨平台,模块化,快速而简单的Web框架. Asp.net Core官网的一个源码合集,方便一次性Clone 目录 快速入门 安 ...

  10. 《java学习三》jvm性能优化-------调优

    常见参数配置 -XX:+PrintGC      每次触发GC的时候打印相关日志 -XX:+UseSerialGC      串行回收 -XX:+PrintGCDetails  更详细的GC日志 -X ...