(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. Java开源框架 iBase4J 搭建笔记

    项目地址:https://gitee.com/iBase4J/iBase4J 搭建步骤:     1.git 代码     2.安装 Zookeeper     3.打包部署 Dubbo Admin ...

  2. js 只能输入英文和数字,且首位必须是字母,字母总数不能超过3个,总长度不能超过20!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. query ajax总是进入error回调函数

    query ajax总是进入error回调函数今天纠结了1小时,ajax总是进入了error函数中.平时使用从来没有出现过这种现象,纠结了半小时. 最后稍微总结出了点: 1.以前使用都是服务器端输出S ...

  4. BA-siemens-symaro传感器简介

    1 传感器的原理 传感器.控制器.执行机构是构成控制系统 3 个要素,传感器的作 用一般用来测量工艺参数,提供给控制器或显示仪表,实现工艺过程的 监测或控制.传感器的类型是按测量参数不同分类的,主要分 ...

  5. 初学ToggleButton 点击button,更换button背景图片;再次点击,恢复之前背景图

    上方的图标,R.drawable.register_checked  是选中图片 下方的图标,   R.drawable.register_unchecked 是未选中图片 默认是上方的选中效果.点击 ...

  6. C/C++学习:函数指针

    曾经在书上看到函数指针相关的都没怎么重视.可是近期在实际的工作中却派上了用场.所以认真地学习了一遍. 函数指针的申明 申明一个函数指针非常easy,就是将函数申明中的函数名替换为一个指针就可以: C/ ...

  7. iOS 权限判断 跳转对应设置界面

    相机权限 1.1 使用说明 在合适的地方导入#import <AVFoundation/AVFoundation.h> 使用AVAuthorizationStatus类获取当前权限状态 在 ...

  8. 对python变量的理解

    #!/usr/bin/python class Person: '''some words content or descriptions!''' name='luomingchuan' _age = ...

  9. jquery根据滚动条动态加载数据

    PHP Code <div id="container"> <?php $query=mysql_query("select * from conten ...

  10. Linux中设置vim自动在运算符号两边加上空格

    vim中设置自动在=+-之类的运算符号左右两边加上空格.原版的vim不带这个功能,写出的代码例如z=x+y,不美观,很多编译器(如VS)能够自动在符号两边加上空格,如z = x + y,看起来比较美观 ...