(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)间平滑跳转的更多相关文章

  1. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

  2. jQuery实现页内锚点平滑跳转

    当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块.具体做法如下: 首先是菜单(锚点)的写法 <a href ...

  3. a标签锚点平滑跳转

    一.创建锚点 <div class="header" id="top">//终点标签,添加一个id <a href="#top&qu ...

  4. jQuery下锚点的平滑跳转

    对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见.jQuery库已经为我们做了很多的工作了,所 ...

  5. vue2.0模拟锚点实现定位平滑滚动

    vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...

  6. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  7. jquery 监听所有锚点链接实现平滑移动

    jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { ...

  8. iOS应用程序开发之应用间的跳转(用着微信等第三方分享登陆)

    简介 配置和实现 判断应用启动方式 一.简介 最实际项目开发中,我们难免会遇到需要从一个应用跳转到另一个应用的情况.比如微信分享,实际就是一种应用间的跳转.但是有时候我们需要实现自己的两个应用间的跳转 ...

  9. 【转】iOS开发--一步步教你彻底学会『iOS应用间相互跳转』

    1. 应用间相互跳转简介 在iOS开发的过程中,我们经常会遇到需要从一个应用程序A跳转到另一个应用程序B的场景.这就需要我们掌握iOS应用程序之间的相互跳转知识. 下面来看看我们在开发过程中遇到的应用 ...

随机推荐

  1. add Admob with Cocos2d-x on iOS

    add Admob with Cocos2d-x on iOS (2013-02-27 14:12:00) 转载▼ 标签: c=blog&q=it&by=tag" targe ...

  2. [笔记][Java7并发编程实战手冊]3.4 等待多个并发事件的完毕CountDownLatch倒计数闭锁

    [笔记][Java7并发编程实战手冊]系列文件夹 简单介绍 本文学习CountDownLatch 倒计数闭锁. 本人英文不好.靠机器翻译,然后有一段非常形象的描写叙述,让我把它叫为倒计数 用给定的计数 ...

  3. hdu2688 Rotate(树状数组)

    题目链接:pid=2688">点击打开链接 题意描写叙述:对一个长度为2<=n<=3000000的数组,求数组中有序对(i<j而且F[i]<F[j])的数量?其 ...

  4. 使用rsync同步数据(by quqi99)

    作者:张华  发表于:2015-12-28版权声明:能够随意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 急需使 ...

  5. (LeetCode)二叉树中和为某一值的路径

    原体例如以下: Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that addin ...

  6. ubuntu13.10升级到ubuntu14.04

    Upgrading from Ubuntu 13.10 To upgrade from Ubuntu 13.10 on a desktop system: Open Software Sources. ...

  7. Android获取系统时间的多种方法

    Android中获取系统时间有多种方法,可分为Java中Calendar类获取,java.util.date类实现,还有android中Time实现. 现总结如下: 方法一: ? 1 2 3 4 5 ...

  8. 基于FPGA的VGA可移植模块终极设计

    一.VGA的诱惑 首先,VGA的驱动,这事,一般的单片机是办不到的:由于FPGA的速度,以及并行的优势,加上可现场配置的优势,VGA的配置,只有俺们FPGA可以胜任,也只有FPGA可以随心所欲地配置( ...

  9. 常见DDOS攻击原理和防御

    常见的DDOS攻击主要分为流量型攻击和cc攻击: 流量型攻击主要通过发送大量的非法报文侵占正常业务带宽 包括SYN Flood/ SYN-ACK Flood /ACK Flood/ FIN/RST F ...

  10. Qt-信号和槽-多对多

    前言:介绍1对多,多对1以及多对多的案例. 一.1对多 演示内容:在QLineEdit输入时,同步label,text browser以及调试输出板同步显示. 1.1 新建工程 1.2 添加部件 拖入 ...