比如 页面中 某个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下使用sendEmail发送带附件的邮件(转载)

    转载:http://www.ttlsa.com/linux/use-sendemail-send-file/ sendEmail是一个轻量级,命令行的SMTP邮件客户端.如果你需要使用命令行发送邮件, ...

  2. Django 之 requirement.txt 依赖文件生成

    通过依赖文件,别人在使用我们的项目时,不需要再一个个去安装所需模块,只需安装依赖文件即可. 1. 导出整个虚拟环境依赖 # 在项目根目录中,打开终端执行以下命令 # 生成 requirements.t ...

  3. vs2013代码模板设置

    模板设置是为了在“添加新项”时默认格式 1.打开文件:D:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\ItemTempl ...

  4. PHP中GD库是做什么用的? PHP GD库介绍11111111

    什么是gd库?    gd库是php处理图形的扩展库,gd库提供了一系列用来处理图片的API,使用GD库可以处理图片,或者生成图片. 在网站上GD库通常用来生成缩略图或者用来对图片加水印或者对网站数据 ...

  5. codevs2924 数独挑战

    2924 数独挑战 时间限制: 1 s 空间限制: 1000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description "芬兰数学家因卡拉,花费3个月时间设计出了世界 ...

  6. Mac 下nginx 环境的配置

    这个是在度娘那里学来的. 因为是使用brew所以先安装: 安装命令如下:curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo ...

  7. fatal pylint error : ......can't find '__main__'module in

    fatal pylint error : ......can't find '__main__'module in原因是没有安装pylint,所以提示没有找到__main__模块 解决方案:1.到官网 ...

  8. Linux命令 查看Linux版本和是否联网

    1.查看Linux内核版本 1.1 $ cat /proc/version [heima01@heima01 ~]$ cat /proc/version Linux version 2.6.32-57 ...

  9. Linux 添加硬盘并分区

    Linux 添加硬盘并分区 *********************** 1.fdisk /dev/sdb 2.m   //帮助 3.p   // p 列出分区表 4.q   //不保存退出: 5. ...

  10. Hive_Hive的数据模型_外部表

    Hive的数据模型之外部表 外部表(External Table)- 指向已经在HDFS中存在的数据,可以创建Partition- 它和内部表在元数据的组织上是相同的,而实际数据的存储则有较大的差异. ...