jQuery实现返回顶部效果的方法

前端之家收集整理的这篇文章主要介绍了jQuery实现返回顶部效果的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery实现返回顶部效果方法分享给大家供大家参考。具体实现方法如下:

1、首先是CSS样式:

2、接着是jquery代码:(要引入jQuery核心库)

代码如下:
SEOver(function() {up()}).mouSEOut(function() {clearTimeout(fq)}).click(function() {$body.animate({scrollTop: 0},400)});$("#xia").mouSEOver(function() {dn()}).mouSEOut(function() {clearTimeout(fq)}).click(function() {$body.animate({scrollTop: $(document).height()},400)});$("#comt").click(function() {$body.animate({scrollTop: $("#comments").offset().top},400)});});function up() {$wd = jQuery(window);$wd.scrollTop($wd.scrollTop() - 1);fq = setTimeout("up()",50)};function dn() {$wd = jQuery(window);$wd.scrollTop($wd.scrollTop() + 1);fq = setTimeout("dn()",50)};

3、引用页面

My JSP 'index.jsp' starting page <Meta http-equiv="pragma" content="no-cache"> <Meta http-equiv="cache-control" content="no-cache"> <Meta http-equiv="expires" content="0"> <Meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <Meta http-equiv="description" content="This is my page">