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项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
随机推荐
- C# ConfigurationManager 类的使用
一.前言 在项目中,我们习惯使用 ConfigurationManager 来读取一些常量.如链接数据库字符串.一些需配置的数据(微信.QQ.支付宝)等的配置.我们需要把这些数据记录在 app.con ...
- react中创建组件以及使用
组件基本使用import React, { Component } from 'react'; // 在组件头部引用 class Home extends Component { // 创建类 ren ...
- npm ERR! Cannot read property 'match' of undefined 错误处理
跟往常一样运行npm install 的时候,突然报错.错误情况如下: npm ERR! Cannot read property 'match' of undefined npm ERR! A co ...
- python中的三元表达式(三目运算符)
python中没有其他语言中的三元表达式,不过有类似的实现方法 其他语言中,例如java的三元表达式是这样 int a = 1; String b = ""; b = a > ...
- Prefix.pch文件的用法
我们知道,每新建立一个工程,比如说HelloWord,在分类SupportingFiles里都会有一个以工程名开头-Prefix.pch结尾的文件,如HelloWord-Prefix.pch.对于这个 ...
- for循环,递归,函数封装作业
/******求100以内,所有的奇数和,求100以内,所有的偶数积*******/ // for循环方法 var sum=0; var sum1=1; for(var i=1;i<=100 ...
- C 语言实例 - 判断奇数/偶数
C 语言实例 - 判断奇数/偶数 C 语言实例 C 语言实例 以下实例判断用户输入的整数是奇数还是偶数. 实例 #include <stdio.h> int main() { int nu ...
- LVM逻辑卷基本概念以及相关操作
一.LVM概念 LVM(Logical Vloume Manager):它是linux环境下对磁盘进行管理的一种机制,正常挂载的磁盘在磁盘资源快要耗尽时,无法动态拉伸增加资源,或由于特殊情况需要动态缩 ...
- C# 数组之List<T>
一.引言 List<T>是ArrayList的泛型等效类,底层数据结构也是数组. 相比Array而言,可以动态的拓展数组长度.增删数据 相比ArrayList而言,由于声明的时候就已经规定 ...
- MySQL创建用户+授权+备份
======权限管理====== 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.update.grant等操作. 那么一般情况在公司 ...