您的位置:首页 - jQuery
jquery纯文本返回顶部
本实例使用jquery实现了纯文本的“返回顶部”特效,
效果请看:http://keleyi.com/keleyi/phtml/totop/index.htm

关于这个效果还有一个实例:
文章:
http://keleyi.com/dev/94fb5964c80ee829.htm
效果:
http://keleyi.com/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.com/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.keleyi.com<a href="http://keleyi.com/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;">keleyi.com</div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;">keleyi.com</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://keleyi.com/a/bjac/6f008786225269ac.htm" target="_blank">原文</a></div>
<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</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>
本站导航
相关文章
柯乐义 Copyright© keleyi.com