jquery配合css简单实现返回顶部效果
更新时间：2013年09月30日 16:53:13 作者：
返回顶部效果想必大家并不陌生吧，其实实现方法有很多，在本文为大家介绍下使用jquery是如何轻易实现的，感兴趣的朋友可以参考下
CSS：
.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);
}
jQuery代码
(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(); }); })();：
复制代码 代码如下:
.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);
}
jQuery代码
复制代码 代码如下:
(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(); }); })();：
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了jQuery实现DIV层收缩展开的方法,实例分析了jQuery中toggle与animate等方法的使用技巧,需要的朋友可以参考下2015-02-02
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
下面小编就为大家带来一篇jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了jQuery深拷贝Json对象的简单实现方法,以简单示例形式分析了jQuery深拷贝的操作技巧,需要的朋友可以参考下2016-07-07
专门针对input[text password hidden]以及textarea的用户输入进行检查2009-07-07
本篇文章小编将为大家介绍，使用PHP+JQuery+Ajax分页的实现。需要的朋友参考下2013-04-04
这篇文章主要介绍了jQuery实现表单步骤流程导航，代码实现效果简单精致，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
jquery库给我们带来了很多方便的地方，使用jquery实现一个简单的下拉菜单已经是很简单了，但也有不同的实现方法。今天自己使用jquery写了一个下拉菜单，参考了Xiaofeng Wang的SexyDropDownMenu2010，其中还是有一些东西感觉值得记录一下。2015-11-11
这篇文章主要为大家详细介绍了jQuery实现HTML元素隐藏和显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
本篇文章主要是对jquery实现弹出div,始终显示在屏幕正中间的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要为大家详细介绍了jQuery版AJAX简易封装代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
最新评论