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

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

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-back-top-button-style-codes/

具体代码如下：

！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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title特效加工厂/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/脚本样式类型=' text/CSS '正文{ margin :0划水：0;font-size :12 px} # main { width :910 pmargin :0 auto高度高度：2000px}。转到{ width :47 pxh three :106 px位置：固定；_ position : absolute _ top :表达式(eval(文档。文档元素。滚动顶部文档。文档元素。客户身高-这个。偏置thight-(parsent(this。当前样式。页边距顶部，10)| | 200-(parsent(this。当前样式。边距底部，10)| | 0))；右：12px底部：25%;背景图像： URL(' images/tobg。png ')；背景-重复：不重复；}.go a { background : URL(images/a . png)no-repeat；显示：块；文本缩进：999 em宽度：37 px余量margin:5pxborder:0飞越：隐藏；float:leftcursor:pointer指针指针；}.去吧顶部{背景-位置：0 0px高度：22px} .去吧。反馈{背景-位置：0-22px；高度：32px} .去吧。底部{背景位置：0-55px；高度：22px} .转到顶部：悬停{背景-位置：-38px-0px } .go反馈：悬停{背景-位置：-38px-22px } .去吧。底部：悬停{背景-位置：-38px-55px }/样式脚本类型=' text/JavaScript ' $(function(){ $(').顶部').单击(//定义返回顶部点击向上滚动的动画function () { $('html，body ').动画({ scrollTop: 0 }，700)；});$('.底部')。单击(//定义返回顶部点击向上滚动的动画function () { $('html，body ').动画({ scrolltop :文档。尸体。客户端高度}，700)；});})/script/head dydiv id=' main ' div class=' go ' a title='返回顶部class=' top '/a a a a title='如果您有意见，请反馈给我们！class=' feedback ' href=' # ' target=' _ blank '/a a a a title='返回底部class=' bottom '/a/div/div/body/html希望本文所述对大家jQuery程序设计有所帮助。