html返回底部代码,jQuery实现的个性化返回底部与返回顶部特效代码

本文实例讲述了jQuery实现的个性化返回底部与返回顶部特效代码。分享给大家供大家参考，具体如下：

运用了所学习的jQuery特性，制作了这款效果，该效果集结了返回底部、返回顶部、网站留言导航三种功能，网站留言的链接你可以修改为任意一个您想导航的链接，这个可以灵活运用了。本款效果的亮点在于兼容性和动画效果，以及设计美观的箭头等。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

特效加工厂

body

{

margin:0; padding:0; font-size:12px;

}

#main

{

width:910px; margin:0 auto; height:2000px;

}

.go{width:47px;height:106px;position:fixed;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||200)-(parseInt(this.currentStyle.marginBottom,10)||0)));right:12px;bottom:25%; background-image:url("images/tobg.png"); background-repeat:no-repeat;}

.go a{background:url(images/a.png) no-repeat;display:block;text-indent:999em;width:37px;margin:5px;border:0;overflow:hidden;float:left; cursor:pointer;}

.go .top{background-position:0 0px;height:22px}

.go .feedback{background-position:0 -22px;height:32px}

.go .bottom{background-position:0 -55px;height:22px}

.go .top:hover{background-position:-38px -0px}

.go .feedback:hover{background-position:-38px -22px}

.go .bottom:hover{background-position:-38px -55px}

$(function () {

$(".top").click(//定义返回顶部点击向上滚动的动画

function () {

$('html,body').animate({ scrollTop: 0 }, 700);

});

$(".bottom").click(//定义返回顶部点击向上滚动的动画

function () {

$('html,body').animate({ scrollTop: document.body.clientHeight }, 700);

});

})

希望本文所述对大家jQuery程序设计有所帮助。