比如 页面中 某个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. iOS公司账号($99)/企业账号($299)申请

    公司账号($99)与企业账号($299)申请基本大同小异,最主要的差别就在于入口不一样 一.注册Apple ID 在iOSAppStore个人开发者账号申请中已经介绍过注册App ID的流程,这里不再 ...

  2. 732. My Calendar III (prev)

    Implement a MyCalendarThree class to store your events. A new event can always be added. Your class ...

  3. cogs 721. [SDOI2007] 线性方程组

    721. [SDOI2007] 线性方程组 ★★   输入文件:gaess.in   输出文件:gaess.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] 已知 n 元 ...

  4. 关于HTML5用SVG画图

    SVG在HTML5中的应用 SVG(Scalable Vector Graphics)是用来绘制矢量图的HTML5标签.只要定义好XML属性就能够获得与其一致的图像元素. 使用SVG之前先将标签加入到 ...

  5. 《SQL 进阶教程》 case:在 CASE 表达式中使用聚合函数

    1.只加入一个社团的学生的社团id select std_id, max(club_id) from student_clubgroup by std_idhaving count(*) =1---- ...

  6. python大战机器学习——支持向量机

    支持向量机(Support Vector Machine,SVM)的基本模型是定义在特征空间上间隔最大的线性分类器.它是一种二类分类模型,当采用了核技巧之后,支持向量机可以用于非线性分类. 1)线性可 ...

  7. redis 拒绝远程访问解决

    启动时报的警告: 1.Warning: no config file specified, using the default config. In order to specify a config ...

  8. PostgreSQL 导出导入表中指定查询数据

    创建一临时表: create table test_view as select * from test where date(to_timestamp(endtime))>='2012-09- ...

  9. Codeforces Round #377 (Div. 2) 被坑了

    http://codeforces.com/contest/732/problem/B 题目要求任意两个连续的日子都要 >= k 那么如果a[1] + a[2] < k,就要把a[2]加上 ...

  10. Css+Html

    CSS样式 <style type="text/css"> tt.tt1 { <style type="text/css"> p { b ...