jQuery實現返回頂部效果的方法
更新時間：2015年05月29日 10:30:48 作者：wo_soul
這篇文章主要介紹了jQuery實現返回頂部效果的方法,涉及jQuery頁面樣式、鼠標事件及頁面元素的相關操作技巧,需要的朋友可以參考下
本文實例講述了jQuery實現返回頂部效果的方法。分享給大家供大家參考。具體實現方法如下：
1、首先是CSS樣式：
/*updown*/
#shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none}
#shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0}
#shang{background-position:0 -308px}#comt{background-position:0 -338px;height:32px}
#xia{background-position:0 -376px}
#comt:hover{background-position:-31px -338px}#shang:hover{background-position:-31px -308px}
#xia:hover{background-position:-31px -376px}
2、接著是jquery代碼：（要引入jQuery核心庫）
復制代碼 代碼如下:
/*updown*/
jQuery(document).ready(function($) {$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");$("#shang").mouseover(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)};
jQuery(document).ready(function($) {$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");$("#shang").mouseover(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、引用頁面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
/*updown*/
#shangxia{position:fixed;top:60%;right:50%;margin-right:-543px;display:block;_display:none}
#shang,#comt,#xia{background:url(images/sprite.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0}
#shang{background-position:0 -308px}#comt{background-position:0 -338px;height:32px}#xia{background-position:0 -376px}
#comt:hover{background-position:-31px -338px}#shang:hover{background-position:-31px -308px}#xia:hover{background-position:-31px -376px}
/*存檔*/
</style>
///上面的是內部樣式，上面已經有外部樣式，如果不使用內部樣式可以引入外部樣式
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/updown/devework.js"></script>
</head>
<body>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
<div id="shangxia">
<div id="shang" title="↑ 返回頂部"></div>
<div id="comt" title="沙發(fā)還沒有被搶哦"></div>
<div id="xia" title="↓ 移至底部"></div>
</div>
</body>
</html>
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
最近研究了一下jQuery，覺得真的是一個很不錯的js庫，其他的不說，關鍵是有翔實的文檔，這點是非常關鍵的。2009-06-06
對于每一個網站前端開發(fā)人員，常常都會遇到設置div透明度的需求，比如在實現圖片幻燈片切換效果經常就需要使圖片淡入淡出。本文分別對原生js和jQuery在IE和其它瀏覽器中設置透明度的方法和相關注意事項進行總結。2016-05-05
工作不忙，閑來無事寫了一個彈出層插件，又需要的盡管拿去用啊有什么建議歡迎提出2009-10-10
使用JQuery 實現一個表格內容 過濾的功能，有需要的朋友可以參考一下，代碼如下：2013-07-07
今天給大家分享一款基于jQuery淘寶產品圖片放大鏡代碼，這是一款基于jquery.imagezoom插件實現的jQuery放大鏡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-09-09
自己平時用得比較多tab功能，網上有很強大的tab功能，但是很多時候太過于復雜，所以自己寫了一個最簡單的jquery插件，代碼如下，就不解釋了。2011-09-09
JQuery Tips(4) 一些關于提高JQuery性能的Tips
如今咱祖國已經崛起了..電腦的配置也是直線上升.可是js的性能問題依然不可小覷..尤其在萬惡的IE中..js引擎速度本來就慢..如果JS如果再寫不好，客戶端多開幾個窗口假死肯定是家常便飯了.廢話不說了，下面說說js性能提升的一些小Tips.2009-12-12
這篇文章主要為大家詳細介紹了jQuery實現圖片跟隨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了jQuery中使用animate自定義動畫的方法的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-05-05
手機移動端實現 jquery和HTML5 Canvas的幸運大獎盤特效
這篇文章主要介紹了手機移動端實現 jquery和HTML5 Canvas的幸運大獎盤特效的相關資料,這里附有實現代碼及實現效果圖，需要的朋友可以參考下2016-12-12