(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. mysql 新用户添加和权限

    1进入数据库 首先,启动数据库服务, sudo service mysql start2. 添加密码 因为MySQL的root用户默认是没有密码,所以直接连接.但作为最该权限用户,没有秘密是绝对不安全 ...

  2. Spring使用HibernateDaoSupport操作数据

    spring提供了一个数据訪问层的类:org.springframework.orm.hibernate3.support.HibernateDaoSupport.一般是让 dao继承该类,然后在da ...

  3. Codeforces Round #168 (Div. 2)---A. Lights Out

    Lights Out time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  4. pandas深入理解

    Pandas是一个Python库,旨在通过“标记”和“关系”数据以完成数据整理工作,库中有两个主要的数据结构Series和DataFrame In [1]: import numpy as np In ...

  5. Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)

    分页菜单(分段菜单)在许多 App 上都会用到.比如大多数新闻 App,如网易新闻.今日头条等,顶部都有个导航菜单.这个导航菜单是一组标签的集合,每个标签表示一个新闻类别,我们点击这个标签后下面就会切 ...

  6. 7. Reverse Integer[E]整数反转

    题目 Given a 32-bit signed integer, reverse digits of an integer. Example1: x = 123, return 321 Exampl ...

  7. js 数据类型判断

    判断type类型 isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' } ...

  8. Android ListView getView()方法重复调用导致position错位

    问题现状:Android ListView getView()方法重复调用导致position错位 解决办法:把ListView布局文件的layout_height属性改为fill_parent或者m ...

  9. jquery的animate能渐变background-color

    在freecodecamp 上学习复习时,写了一个demo,引用了 jquery 实现 color 的渐变动画,然后运行测试的时候,发现其他功能都正常,就是无法是实现颜色的动画. 如: $('butt ...

  10. ZBrush 笔刷的基础参数

    ZBrush®中的笔刷基本参数主要包括3个:Draw Size(绘制大小).Focal Shift(焦点衰减)和Z Intensity(深度强度),通常使用这3个基本参数对笔刷进行调整. 在视图文档区 ...