您的位置：首页 > Web前端 > JQuery

jquery回到页面顶部代码案例

2013-01-23 10:12 281 查看

方法一：

效果图

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);
}

js代码：

(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和一张向上箭头图片up.png

<?xml version="1.0" encoding="UTF-8" ?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript" src="../javascript/jquery-1.6.js"></script>
<style type="text/css">
body {
height:1200px;
}

#testIE6 {
_height:1200px;
_width:200px;
}

.scroll-up {
background: #dcdcdc url('up.png') no-repeat center center;
width:48px !important;
height:48px !important;
_width: 58px;
_height: 58px;
position: fixed;
_position: absolute; /*for IE6*/
opacity: .6;
filter: Alpha(opacity=60); /*for IE*/
padding:5px;
cursor: pointer;
display: none;

border-radius:5px;
-webkit-transition-property: background-color, opacity;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease;

-moz-transition-property: background-color;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease;
}
.scroll-up:hover {
background-color:#B9B9B9;
opacity: .8;
}
</style>
</head>
<body>
<div id="testIE6"></div>
<script type="text/javascript">
;(function($) {
$.scrollBtn = function(options) {
var opts = $.extend({}, $.scrollBtn.defaults, options);

var $scrollBtn = $('<div></div>').css({
bottom: opts.bottom + 'px',
right: opts.right + 'px'
}).addClass('scroll-up')
.attr('title', opts.title)
.click(function() {
$('html, body').animate({scrollTop: 0}, opts.duration);
}).appendTo('body');

$(window).bind('scroll', function() {
var scrollTop = $(document).scrollTop(),
viewHeight = $(window).height();

if(scrollTop <= opts.showScale) {
if($scrollBtn.is(':visible'))
$scrollBtn.fadeOut(500);
} else {
if($scrollBtn.is(':hidden'))
$scrollBtn.fadeIn(500);
}

if(isIE6()) {
var top = viewHeight + scrollTop - $scrollBtn.outerHeight() - opts.bottom;
$scrollBtn.css('top', top + 'px');
}
});

function isIE6() {
if($.browser.msie) {
if($.browser.version == '6.0') return true;
}
}
};

/**
* -params
*  -showScale: scroll down how much to show the scrollup button
*  -right: to right of scrollable container
*  -bottom: to bottom of scrollable container
*/
$.scrollBtn.defaults = {
showScale: 100,
right:10,
bottom:10,
duration:200,
title:'back to top'
}
})(jQuery);

$.scrollBtn({
showScale: 200,
bottom:20,
right:20
});
</script>
</body>
</html>

本文出自 “IT之梦” 博客，请务必保留此出处http://dreamboy.blog.51cto.com/3180937/1124431

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航