按钮滚动到指定位置(JS)
function intval(v) {
v = parseInt(v);
return isNaN(v) ? 0 : v;
}
function getPos(e) {
var l = 0;
var t = 0;
var w = intval(e.style.width);
var h = intval(e.style.height);
var wb = e.offsetWidth;
var hb = e.offsetHeight;
while (e.offsetParent) {
l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
e = e.offsetParent;
}
l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
return {
x: l,
y: t,
w: w,
h: h,
wb: wb,
hb: hb
};
}
function getScroll() {
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return {
t: t,
l: l,
w: w,
h: h
};
}
function scroller(el, duration) {
if (typeof el != "object") {
el = document.getElementById(el);
}
if (!el) return;
var z = this;
z.el = el;
z.p = getPos(el);
z.s = getScroll();
z.clear = function() {
window.clearInterval(z.timer);
z.timer = null
};
z.t = (new Date).getTime();
z.step = function() {
var t = (new Date).getTime();
var p = (t - z.t) / duration;
if (t >= duration + z.t) {
z.clear();
window.setTimeout(function() {
z.scroll(z.p.y, z.p.x)
}, 13);
} else {
st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t;
sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l;
z.scroll(st, sl);
}
};
z.scroll = function(t, l) {
window.scrollTo(l, t)
};
z.timer = window.setInterval(function() {
z.step();
}, 13);
}
调用方式 :
onclick="scroller('igbook', 200)"
按钮滚动到指定位置(JS)的更多相关文章
- 滚动到指定位置js
function mScroll(id){ $("html,body").stop(true); $(); }
- js滚动到指定位置
序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...
- selenium webdriver——JS滚动到指定位置
1.DOM滚动方法 1.scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...
- scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置
scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...
- js 获取滚动位置,滚动到指定位置,平滑滚动
1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...
- 通过scrollTop,使子元素滚动至指定位置
想实现这样的一个功能,点击子元素,让元素滚动至指定位置,怎么实现呢? 在代码实现之前,先了解下相关关键点. 1.scrollHeight 属性 通过 scrollHeight 属性可获得子元素的滚动高 ...
- 利用jquery制作滚动到指定位置触发动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...
- Vue如何引入jquery实现平滑滚动到指定位置效果
在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
- 自定义ScrollViewer的Touch事件--触摸上下移动ScrollViewer滚动到指定位置
double mPointY;//触摸点的Y坐标 double mOffsetY;//滚动条当前位置 bool mIsTouch = false;//是否触摸 //触摸事件 private void ...
随机推荐
- EVB-P6UL:一识庐山真面目
前言 原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验与正确的图片链接显示,请访问我的博客原文: 在爱板网上看到这个活动,昨晚确认,今 ...
- 安装htop教程及坑
安装htop的坑:1.上官网http://hisham.hm/htop/releases/下载最新的包2.解压缩:tar -zxvf htop-2.0.2.tar.gz;3.进入目标文件夹: cd h ...
- HDFS怎样检測并删除多余副本块
前言 在HDFS中,每时每刻都在进行着大量block块的创建和删除操作,这些庞大的block块构建起了这套复杂的分布式系统.普通block的读写删除操作一般人都或多或少了解过一些,可是过量的副本清理机 ...
- SQLserver字符串分割函数
一.按指定符号分割字符串,返回分割后的元素个数,方法很简单,就是看字符串中存在多少个分隔符号,然后再加一,就是要求的结果.CREATE function Get_StrArrayLength( @s ...
- swiper的理解
参考:Swiper中文网 Swiper使用方法: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- linux下性能监控工具
一. Linux 性能监控的概述 系统由若干子系统构成,通常改动一个子系统有可能影响到另外一个子系统.甚至会导致整个系统不稳定.崩溃. 所以说优化.监測.測试一般是连在一起的,并且是一个循环并且长期 ...
- Fragment小结
Fragment是Android3.0之后增加的新特性,通常人们叫它碎片.可是,我认为把它理解成一个View模块比較好,尽管它不是继承自View.假设阅读过源代码就知道它是内置View对象从而实现Vi ...
- Web网页开发常见经典问题
1.网络请求参数共享 转发dispatcher和重定向redirect 对于参数共享的区别 Redirect和Dispatcher 区别
- JQuery利用选择器定位动态id?
假如我们需要去定位一个动态生成的div,我们需要为它指定一个动态的id 例如: 前台使用EL进行迭代LIST生成div,为其添加动态的id,生成之后变成下面样式 <div id="tz ...
- 平滑处理 - cvSmooth() 函数实现
前言 平滑是图像处理中很重要的操作,其主要用途是降噪.Open CV 提供了 5 种不同的平滑方法:简单模糊,简单无缩放变换的模糊,中值模糊,高斯模糊和双边滤波,它们都通过函数 cvSmooth 实现 ...