jQuery实现带有动画效果的回到顶部和底部代码

本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码。分享给大家供大家参考，具体如下：

这款动画版的回到顶部和底部效果代码，也算是比较常见的一款网页特效了，像淘宝网就有这种效果，使用了jQuery插件，加入了动画效果。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-动画-样式-滚动-顶部-按钮-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题动画版的回到顶部和底部效果代码/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 ' style type=' text/CSS ' body { padd :0 px；margin:0px}#roll_top，#fall，# CT { position : relativecursor : pointer指针；高度：40 px宽度：15 px} # roll _ top {背景： URL(图像/滚动。巴布亚新几内亚)不重复；} # fall {背景： URL(图像/滚动。png)无重复0-80px；} # CT {背景： URL(图像/卷。png)无重复0-40px；} #滚动{ display:block宽度：15 px右边距：-508 px；位置：固定；右：50%;前：50%；_边距-右侧：-507像素；_ position : absolute _ margin-top :300 px；_ top :表达式(eval(文档。文档元素。滚动顶部))；}/style！-[如果IE]样式类型='text/css'/*修正IE6振动bug */html，body{background-image:url(约：空白)；背景-附件：固定；}/style！[endif] -脚本类型=' text/JAVAScript ' src=' http : jquery 1。3 .2 .js '/script脚本类型=' text/JavaScript ' jquery(文档)。就绪(函数($){ $('#roll_top ').单击(function(){$('html，body ').动画({scrollTop: '0px'}，800)；});$('#ct ').单击(function(){$('html，body ').动画({scrollTop:$(').' CT ' .偏移量()。top}，800)；});$(“# fall”).单击(function(){$('html，body ').动画({scrollTop:$(').页脚。页脚_ a ').偏移量()。top}，800)；});});/脚本/流浆池预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了brdiv class='head '这里是页面顶部/divdiv id='roll' div title='回到顶部id=' roll _ top '/div title='转到底部id=' fall '/div/div id=' content ' style=' height :2000 px；'/divdiv class='footer '这里是页面底部/div/body/html希望本文所述对大家jQuery程序设计有所帮助。