欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程

目录导航

支持链接到新页面的锚点平滑跳转-AnchorArt.js

香港硬防(2G)机房 添加于 2012-01-26  
javascript教程

网上有很多锚点平滑滚动的javascript脚本下载,但是很多脚本需要手工在XHTML上写入鼠标事件,更加别说支持链接到新页面的锚点了。而AnchorArt.js却可以做到一次引入自动给页面带锚点的链接添加平滑滚动效果,并且支持链接到新页面的锚点!AnchorArt.js(压缩版)仅仅只有2KB大小!

演示地址
源文件下载

关于链接到新页面的锚点平滑滚动的思路:

如果A页面打开url带锚点的B页面(#号),那么浏览器在页面下载完毕后自动跳到相应的锚点上,据我所知还没有办法阻止这个浏览器默认的行为。
但是如果B页面没有对应的锚点浏览器就不会进行跳转了,所以我们在url的锚点附加一点额外的信息那就可以让浏览器不进行调转了,接下来我们的脚本就可以通过锚点附加的参数进行平滑滚动操作了。
所有的操作通过绑定事件完成,在脚本没有运行的时候也不会破坏原有锚点的功能
所以我在网上一搜“锚点平滑滚动”结果一大堆,选择了个写的比较简洁的脚本,按照上面的思路给它写个事件绑定和接收锚点参数滚动的效果于是就出了AnchorArt.js。

/*
AnchorArt.js
平滑锚点跳转[支持新窗口打开的页面]
www.planeArt.cn
2009.08.25
*/

//页面加载完成执行函数
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
		} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
    	}
	}
}
addLoadEvent(function() {
	allLinks();//绑定链接
	pageInit();//获取锚点参数执行跳转
});

// 转换为数字
function intval(v){
	v = parseInt(v);
	return isNaN(v) ? 0 : v;
}

// 获取元素信息
function getPos(e){
	var l = 0;
	var t  = 0;
	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):0);
		t += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
		e = e.offsetParent;
	}
	l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
	t  += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
	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 };
}

// 滚动
var $sr=1;//防止同时执行多个跳转
function scroller(el, duration){
	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)},13);
			$sr=1;
		} else {
			st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
			sl = ((-Math.cos(p*Math.PI)/2) + 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();},13);
	$sr=0;
}

//给页面锚点添加额外的参数
function goAnchor(href,target){
	u=href.split("#");
	if (target=='') target='_self';
	if (target=='_self' && $sr==1) scroller(u[1],800);
	window.open(u[0] + '#anchor=' + u[1],target=target);
}
function allLinks(){
	var allLinks = document.getElementsByTagName('a');
	for (var i=0;i<allLinks.length;i++) {
	  var lnk = allLinks[i];
	  if ((lnk.href && lnk.href.indexOf('#') != -1)) {
		  lnk.onclick=function(evt){
			  if ($sr==1) goAnchor(this.href,this.target);
			  return false;
		  }
	  }
	}
}

//接收页面锚点参数执行平滑跳转
function pageInit(){
	hash=window.location.hash.split("#anchor=");
	scroller(hash[1],800);
}

原文来自零度科技:http://www.ldisp.com/a/javascript/2012/AnchorArt.shtml

上一篇:IE浏览器js代码调试工具
下一篇:html在线编辑器之KindEditor

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

143

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理