`

jQuery返回顶部特效，网页右下角的回到顶部按钮

 
阅读更多
//firefox 、google chrome IE 效果不同 
<html>
<head>
<title>返回顶部特效，滚动条拖至最底部</title>
<script type="text/javascript" src="http://images.baihe.com/js/jquery-1.3.2.min.js"></script>
<script language="javascript">
$(function(){
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = 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);
$(function() { $backToTopFun(); });
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*返回顶部*/
.backToTop {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: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity=60);}
p {height:80px;}
</style>
</head>
<body>
<p>往下拉，才会出来。如果不显示效果，请刷新！！！</p>
<p>往下拉，才会出来。如果不显示效果，请刷新！！！</p>
<p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p>
<p>往下拉，才会出来。如果不显示效果，请刷新！！！</p>
<p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p><p>往下拉，才会出来。如果不显示效果，请刷新！！！</p>
</body>
</html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
分享到：
| 如何让笔记本、手机锂电池寿命达到最长
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery网页右侧二维码返回顶部按钮代码

    这是一款jQuery实现带有微信二维码的底部固定层返回顶部代码，网页右侧悬浮二维码，右下角返回顶部按钮代码。

    jQuery 返回顶部效果

    jQuery带微博按钮返回顶部效果是一款基于jquery+css3实现的网页右下角带微博按钮的返回顶部特效。

    jQuery带微博按钮返回顶部效果.zip

    jQuery带微博按钮返回顶部效果是一款基于jquery css3实现的网页右下角带微博按钮的返回顶部特效。

    jQuery带微博按钮返回顶部效果特效代码

    jQuery带微博按钮返回顶部效果是一款基于jquery+css3实现的网页右下角带微博按钮的返回顶部特效。

    jQuery右侧悬浮分享按钮特效代码

    jQuery右侧悬浮分享按钮代码是一款带返回顶部按钮，微信二维码和微博分享按钮。

    jQuery返回顶部插件弹性动画

    jquery实现的带反弹动画效果返回顶部插件，jquery网页右下角返回顶部按钮，设计美观大气。

    jQuery仿天猫京东商城楼层滚动跳转代码

    一款购物商城常用的jQuery仿天猫京东商城楼层滚动跳转代码，点击楼层菜单跳转定位到指定位置，右下角还有返回顶部按钮。

    jQuery攻略.pdf

    60 3.16 创建“返回顶部”链接 63 3.17 提供“更多……”链接 64 3.18 以动画效果显示文本 67 3.19 以滑动效果来替换文本 70 3.20 使图像滚动 71 3.21 确定被按下的键 75 3.22 防止事件冒泡 77 3.23 链接多个活动 80...

    《JavaScript实例精通》[源代码]

    示例描述：jQuery应用特效。 18_1.htm 动态表格和动态表单。 18_2.htm 输入框获得焦点、点击、划过时全选。 18_3.htm CSS 样式表动态选择。 18_4.htm jQuery的选择器之变态演示。 18_5.htm 让链接打开一个...

    JavaScript实例精通

    示例描述：jQuery应用特效。 18_1.htm 动态表格和动态表单。 18_2.htm 输入框获得焦点、点击、划过时全选。 18_3.htm CSS 样式表动态选择。 18_4.htm jQuery的选择器之变态演示。 18_5.htm 让链接打开一个...

Magicbox
Global site tag (gtag.js) - Google Analytics