Javascript 实现锚点(Anchor)间平滑跳转
(function($){
$.fn.scroller = function(options){
var defaultVal = {
duration:
};
var obj = $.extend({},defaultVal,options);
var el = options.el;
var duration = options.duration;
return this.each(function(){
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)},);
} else {
st = ((-Math.cos(p*Math.PI)/) + 0.5) * (z.p.y-z.s.t) + z.s.t;
sl = ((-Math.cos(p*Math.PI)/) + 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();},);
});
}; function intval(v)
{
v = parseInt(v);
return isNaN(v) ? : v;
} // 获取元素信息
function getPos(e)
{
var l = ;
var t = ;
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):);
t += e.offsetTop + (e.currentStyle?intval(e.currentStyle.borderTopWidth):);
e = e.offsetParent;
}
l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):);
t += e.offsetTop + (e.currentStyle?intval(e.currentStyle.borderTopWidth):);
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 };
}
})(jQuery) $(function(){
$('#goto').click(function(){
$(this).scroller(
{
el:'t1',
duration:
}
);
});
})
Javascript 实现锚点(Anchor)间平滑跳转的更多相关文章
- jQuery实现页面内锚点平滑跳转
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...
- jQuery实现页内锚点平滑跳转
当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块.具体做法如下: 首先是菜单(锚点)的写法 <a href ...
- a标签锚点平滑跳转
一.创建锚点 <div class="header" id="top">//终点标签,添加一个id <a href="#top&qu ...
- jQuery下锚点的平滑跳转
对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见.jQuery库已经为我们做了很多的工作了,所 ...
- vue2.0模拟锚点实现定位平滑滚动
vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...
- 【前端】jQuery实现锚点向下平滑滚动特效
jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...
- jquery 监听所有锚点链接实现平滑移动
jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { ...
- iOS应用程序开发之应用间的跳转(用着微信等第三方分享登陆)
简介 配置和实现 判断应用启动方式 一.简介 最实际项目开发中,我们难免会遇到需要从一个应用跳转到另一个应用的情况.比如微信分享,实际就是一种应用间的跳转.但是有时候我们需要实现自己的两个应用间的跳转 ...
- 【转】iOS开发--一步步教你彻底学会『iOS应用间相互跳转』
1. 应用间相互跳转简介 在iOS开发的过程中,我们经常会遇到需要从一个应用程序A跳转到另一个应用程序B的场景.这就需要我们掌握iOS应用程序之间的相互跳转知识. 下面来看看我们在开发过程中遇到的应用 ...
随机推荐
- 2015 Multi-University Training Contest 8 hdu 5381 The sum of gcd
The sum of gcd Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)To ...
- EXPLAIN sql优化方法(3)DERIVED
派生表和视图的性能 从MySQL 4.1开始,它已经支持派生表.联机视图或者基本的FROM从句的子查询. 这些特性之间彼此相关,但是它们之间的性能比较如何呢? MySQL 5.0 中的派生表似乎和视图 ...
- asp.net mvc--identity知识点
asp.net identity 特性 one asp.net identity 持久化控制和易于管理 单元测试 自定义角色 基于声明的身份验证 OWIN集成 NuGet包 identity的类图 简 ...
- (素数求解)I - Dirichlet's Theorem on Arithmetic Progressions(1.5.5)
Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit cid=1006#sta ...
- 防止 Chrome 屏蔽 非官方 扩展程序 教程(二)
说明 前面介绍过一篇通过开发人员模式载入扩展程序的方法,尽管能够正常使用,可是每次又一次打开 Chrome 都会弹出询问窗体,比較麻烦.这里介绍第二种防止屏蔽的方法.与前一种方法相比,尽管应用的步骤多 ...
- edit filter rules in sql source control
https://documentation.red-gate.com/soc6/common-tasks/exclude-objects-using-filters 如果有人上传了filter,nam ...
- centos6配置固定ip地址(选择桥接模式)
1.配置ifcfg-eth0 vim /etc/sysconfig/network-scripts/ifcfg-eth0 首先把BOOTPROTO="dhcp"改成BOOTPROT ...
- iOS 判断是否有权限访问相机,相册
1.判断用户是否有权限访问相册 #import <AssetsLibrary/AssetsLibrary.h> ALAuthorizationStatus author =[ALAsset ...
- [makefile]如何设置不同目录的代码(.c),生成到指定目录下(./debug/.o))
部分代码跟makefile不在同一目录,有没有好的方法来设置依赖关系,我找到三种方法,但感觉都不完美,下面我会把他列出来并加以说明,不知有没有更好的方法,makefile本身也不是很熟,请大家指教: ...
- canvas实现刮刮卡效果
canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener touchstart.tou ...