html锚点特效,jQuery实现页面内锚点平滑跳转特效的方法总结

平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。

jQuery实现页面内锚点平滑跳转

#hovertree {

height: 800px;

background: red;

text-align:center;color:white;

}

#keleyi {

height: 800px;

background: green;text-align:center;color:white;

}

#myslider {

height: 800px;

background: black;text-align:center;color:white;

}

#zonemenu {

height: 800px;

background: yellow;text-align:center;

}

.keleyilink{position:fixed;}

.keleyilink a {text-decoration:none;}

HoverTree

KKK

myslider

ZoneMenu

hovertree

原文 JJJ HoverTree 特效库

jb51

myslider

zonemenu

function scroll(id) {

$("#" + id).HoverTreeScroll(1000);

}

更简单点的实现方法：

代码只有一句话

$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);

animate()方法用来实现一组css的自定义动画，有两种调用方法

第一种形式接受4个参数，如下所示

.animate( properties [, duration] [, easing] [, complete] )

properties – 一个包含样式属性及值的映射

duration – 可选的速度参数，既可以是预置的字符串，也可以是一个毫秒数值

easing – 可选的缓动类型，jquery默认的只有两种：swing和linear,要使用其它效果需要安装缓动类的插件

complete – 可选的回调函数，在动画结束时被调用

第一种形式的示例如下

.animate({property1: 'value1', property2: 'value2'},

speed, easing, function() {

alert('The animation is finished.');

});

本文实现锚点跳转的代码使用了第一种形式

$("html,body")代表对html或body元素进行动画，即要改变他们的css属性值

scrollTop是要改变的属性值，表示滚动条滑过的距离，在这里表示向下拉动浏览器滚动条后html(body)被浏览器顶端隐藏的高度

$("#elementid").offset().top就是html(body)需要被浏览器顶端隐藏的高度，它代表id为elementid的元素顶端到网页顶端(不是浏览器可视区域顶端)的绝对距离。

1000是指动画时间为1秒

animate()方法还有第二种调用形式

.animate( properties, options )

一个是属性映射，一个是选项映射。实际上这里的第二个参数是把第一种形式的第2-4个参数封装在另一个映射中，同时又添加了两个选项。第二种形式的代码如下：

.animate({

property1: 'value1',

property2: 'value2'

}, {

duration: 'value',

easing: 'value',

complete: function(){

alert('The animation is finished.');

},

queue: boolen,

step: callback

});

以上所述就是本文的全部内容了，希望大家能够喜欢。