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应用程序之间的相互跳转知识. 下面来看看我们在开发过程中遇到的应用 ...
随机推荐
- String String s = new String("asd") 涉及对象数目
问题·:.String str = new String("abc")创建了多少个对象? 这个问题在很多书籍上都有说到比如<Java程序员面试宝典>,包括很多国内大公司 ...
- eclipse svn -- - --- appears to be part of a subversion 1.7 or greater....解决方法
安装与svn1.7相兼容的flex Eclipse中的SVN(subclipse) 今天差点被TortoiseSVN1.7和subclipse弄崩溃... 还好最后弄好了,在此把方法写出来,以免其他人 ...
- json_encode把中文字符的数组转为json格式
function ch_json_encode($data) { /** * 将中文编码 * @param array $data * @returnstring */ function ch_url ...
- Shell编程入门(第二版)(上)
简单的示例Shell程序 示例1. #!/bin/bash #This is to show what a shell script looks like echo "Our first e ...
- HDU 4341
分组背包而已.注意的是,每个时间T,要把一组的全加进去比较一次. #include <iostream> #include <cstdio> #include <cstr ...
- java书籍推荐:《Java SE 6 技術手册》
Java SE 6 技術手册 或 Java SE 6 技術手册 Java SE 6 技術手册 為什麼選擇用 Markdown?仅仅是單純把文件又一次排版太無聊了,不如趁這個機會學些新東西.所以我就藉 ...
- [GraphQL] Mutations and Input Types
Sometimes, you want to resues object type when doing mutation, you can use 'input' type to help: inp ...
- [Node.js] Manage Configuration Values with Environment Variables
Storing configuration in files instead of the environment has many downsides, including mistakenly c ...
- logstash tcp multihost output(多目标主机输出,保证TCP输出链路的稳定性)
在清洗日志时,有一个应用场景,就是TCP输出时,须要在一个主机挂了的情况下,自已切换到下一个可用入口.而原tcp output仅支持单个目标主机设定.故本人在原tcp的基础上,开发出tcp_multi ...
- 微信小程序 多图上传解决方案
为了使代码体积小 我这里将多图上传 封装到单独的一个js 页面的js调用他 我们看firhealth.js文件内容 // pages/home/home.js var upload = requir ...