当前位置:爱推吧 » Div+CSS » 返回顶部的Jquery代码

返回顶部的Jquery代码

有没有感觉,当你的页面过长的时候,回到顶部得慢慢移动鼠标,很不方便,现在介绍一种方法:用Jquery代码来实现“返回顶部”,在最顶端的时候是不会显示“返回顶部”的,当你向下查看页面的时候,会在右底出现“返回顶部”的快捷移动方式。

这个功能的实现,你需要做三个方面的工作。

一、在style.css里面增加如下修饰“返回顶部”的代码。

.backToTop {
display: block;
width: 18px;
line-height: 1.2;
padding: 10px 5px;
background-color: #123;
color:#fff;
font-size: 14px;
font-weight:bold;
text-align: center;
position: fixed;
_position: absolute;
right: 0px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: Alpha(opacity=60);
}

二、实现“返回顶部”的Jquery代码:

<script type="text/javascript">
(function() {
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div></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>

三、当然还要加载jquery-1.7.1.min.js,你可以从Jquery的官网下载最新版的库。

呵,做好了这三步,你可以到单本小说《大圣传》(http:/xs.ituibar.com)查看效果。

发表评论

电子邮件地址不会被公开。 必填项已用*标注