还是先看效果吧：
测试地址：http://xiebiji.com/works/mt1.2cn/fxScroll.html
实例例子压缩包：mt1.2cn
*原创文章转载请注明出处：http://xiebiji.com/2009/09/mtscroll 作者:小Joe
Jq有提供锚点跳转的效果实例（点击这里查看jq实现的方法），其实mootools也有的(Fx.Scroll扩展类),具体如下实现：
ps.实例中介绍了一种全居中的css写法，有兴趣又不知道的同学可以研究一下了。^_^高手就瞄一下吧。
HTML代码：
<div id="container">
<div id="scroll">
<ul>
<li id="anchor_1">1.我是第一锚点</li>
<li id="anchor_2">2.哈？我也是锚点，我是第二个</li>
<li id="anchor_3">3.第三个锚点就是我啦</li>
<li id="anchor_4">4.什么？我居然是第四个锚点</li>
<li id="anchor_5">5.我汗~我是最后一个锚点</li>
</ul>
</div>
<div id="handles">
<a href="#anchor_1">目标一</a>
<a href="#anchor_2">目标二</a>
<a href="#anchor_3">目标三</a>
<a href="#anchor_4">目标四</a>
<a href="#anchor_5">目标五</a></div>
</div>css代码：
/*全居中*/ body,html{height:100%;} #container{width:420px; height:520px;background:#000;margin:-260px auto 0;position:relative;top:50%;border:1px solid #000;} #scroll{overflow:auto;height:80%;width:100%}/*其他css代码都系次要的，只要目标容器有设置滚动即可*/ #scroll ul{margin:0; padding:0;} #scroll li{height:500px;background:#CCC;} #handles{padding-top:10px;} #handles a{color:#FFF;}
Mootools代码
window.addEvent('domready',function(){ var myFx = new Fx.Scroll('scroll', {//给id为scroll的div标签附加滑动类 offset: { 'x': 0,//初始化时横向偏移 'y': 0//初始化时竖向偏移 }, transition: Fx.Transitions.Cubic.easeOut//Fx的可选参数中的动作属性 }).toElement($('anchor_2'));//初始化的时候就滑动到第二个描点 $$('#handles a').each(function(anchor) { anchor.addEvent('click', function(e) { e.stop();//停止事件传播，使超链接失效 var lnk = $(anchor.href.split('#')[1]);//获取锚点id myFx.toElement(lnk);//滑动到指定锚点 }); }); });
初始化方法：
var myFx = new Fx.Scroll(element[, options]);
参数:
1. element – (mixed) 元素的id或引用
2. options – (object, 可选) Fx的所有可选项, 以及下列可选项:
可选项:
1. offset – (object: 默认为 {‘x’: 0, ‘y’: 0}) 包含有x,y值得对象, 代表元素内部滚动的起始位置
2. overflown – (array: 默认为 []) 嵌套的滚动容器元素数组, 参见Element:getPosition方法的详解
3. wheelStops – (boolean: 默认为 true) 如果设置为true,则当滚动过程中滚动鼠标滚轮的话, 元素内的滚动操作将停止.
返回值:
* (object) Fx.Scroll实例
该类需要安装mt的扩展，其他方法请参考手册。
No Response to 【Mootools 1.2中文实例诠释】Fx.Scroll... »
还没有任何评论。