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)的更多相关文章

  1. 滚动到指定位置js

    function mScroll(id){ $("html,body").stop(true); $(); }

  2. js滚动到指定位置

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

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

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

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

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

  5. js 获取滚动位置,滚动到指定位置,平滑滚动

    1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...

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

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

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

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

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

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

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

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

随机推荐

  1. angular - 如何支持less和sass(scss)

    更新时间: (2018-7-26) - 使用angular6.x最新版本 新建项目时,我们指定类型: 示例:ng new projectname -style=sass(scss) 实例:ng new ...

  2. struts2获取服务器临时目录

      CreateTime--2017年9月7日08:57:39 Author:Marydon struts2获取服务器(tomcat.WebLogic)的临时目录 需要导入: import java. ...

  3. Rom Modified [Galaxy 3 Tested]

    1,Virtualbox虚拟机设置-数据空间注意这里不要勾选那个自动挂载,不然后面mount总会提示mount.vbox.. invalid argument. 2,进入ubuntu中,在终端下输入 ...

  4. objc_msgSend 报错

    NSMutableArray * mutableArray = [NSMutableArray arrayWithArray:array]; objc_msgSend(mutableArray,@se ...

  5. OpenGL研究3.0 多边形区域填充

    OpenGL研究3.0 多边形区域填充 DionysosLai(906391500@qq.com)2014-06-22 所谓多边形区域填充.就是将多边形内部区域,所有已相同色块填充.注意:这里讨论的多 ...

  6. CentOS 6.5语言包裁剪

    https://www.ibm.com/developerworks/cn/linux/l-cn-linuxglb/ 浅析 Linux 的国际化与本地化机制 Linux 是一个国际化的操作系统,它的工 ...

  7. 跟我学AngularJs:Controller数据共享、继承、通信使用具体解释

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主讲了AngularJs中的Controller中数据共享.继承.通信的具体使用 本 ...

  8. java操作pdf

    使用pdf模板生成pdf 1,工具 Adobe Acrobat X Pro 2,pom文件配置 <dependency> <groupId>com.itextpdf</g ...

  9. [jjzhu学java]之solr4.9同步mysql数据

    Solr是一个高性能,採用Java5开发,基于Lucene的全文搜索server.同一时候对其进行了扩展,提供了比Lucene更为丰富的查询语言,同一时候实现了可配置.可扩展并对查询性能进行了优化,而 ...

  10. python学习(十一)函数、作用域、参数

    定义和调用函数 在这里函数的定义和调用和一般的语句没什么不一样,感觉函数也是对象 #!/usr/bin/python def times(x, y):                # 定义函数    ...