DIV CSS 佈局教程網

jquery純文本返回頂部
編輯:JQuery常見問題     
本實例使用jquery實現了純文本的“返回頂部”特效,
效果請看:http:///keleyi/phtml/totop/index.htm

關於這個效果還有一個實例:
文章:
http:///dev/94fb5964c80ee829.htm
效果:
http:///keleyi/phtml/gototop.htm

以下是本實例源代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery實現返回頂部-</title>
<style type="text/css">
.backToTop_keleyi_com {display: none;width: 18px;line-height: 1.2;padding: 5px 0;background-color: #000;color: #fff;
font-size: 12px;text-align: center;position: fixed;_position: absolute;right: 30px;bottom: 100px;
_bottom: "auto";cursor: pointer;opacity: .6;filter: Alpha(opacity=60);}
body{margin:0px;}
</style>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.8.2.min.js"></script>
</head>
<body>
<div style="background-color:#959822; width:100%;height:150px;">請滾動鼠標使頁面向下</div>
<div style="background-color:Green; width:100%;height:150px;">www.<a href="http:///dev/94fb5964c80ee829.htm" target="_blank">圖片返回頂部效果</a></div>
<div style="background-color:Red; width:100%;height:150px;">歡迎</div>
<div style="background-color:Yellow; width:100%;height:150px;">hi</div>
<div style="background-color:Silver; width:100%;height:150px;"></div>
<div style="background-color:Aqua; width:100%;height:150px;"></div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;"></div>
<div style="background-color:Blue; width:100%;height:150px;"></div>
<div style="background-color:Olive; width:100%;height:150px;"> 返回頂部</div>
<div style="background-color:Green; width:100%;height:150px;">A</div>
<div style="background-color:Purple; width:100%;height:150px;">jquery</div>
<div style="background-color:Green; width:100%;height:150px;"><a href="http:///a/bjac/6f008786225269ac.htm" target="_blank">原文</a></div>
<div style="background-color:Lime; width:100%;height:150px;"></div>
<div style="background-color:Orange; width:100%;height:150px;">完整代碼</div>
<script type="text/javascript">
$(document).ready(function () {
(function () {
var $backToTopTxt = "▲返回頂部", $backToTopEle = $('<div class="backToTop_keleyi_com"></div>').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function () {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun_keleyi_com = function () {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0) ? $backToTopEle.show() : $backToTopEle.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh - 166);
}
};
$(window).bind("scroll", $backToTopFun_keleyi_com);
$(function () { $backToTopFun_keleyi_com(); });
})();
})
</script>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved