Demo:
Chèn vào cuối footer begin:
CÁCH LÀM:
Chèn vào cuối footer begin:
- Code:
<script type='text/javascript'>
//<![CDATA[
$(function () {
var sheight = $(window).height();
var maxheight = $("body").height();
$.fn.scrollToMiddle = function () {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "maxheight/2-sheight/2") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function () {
if ($(window).scrollTop() == "maxheight/2-sheight/2") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function () {
$("html, body").animate({
scrollTop: maxheight / 2 - sheight / 2
}, "slow")
})
};
$.fn.scrollToBottom = function () {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "maxheight") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function () {
if ($(window).scrollTop() == "maxheight") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function () {
$("html, body").animate({
scrollTop: maxheight
}, "slow")
})
};
$.fn.scrollToTop = function () {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function () {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function () {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
};
$("#toMiddle").scrollToMiddle();
$("#toTop").scrollToTop();
$("#toBottom").scrollToBottom();
});
//]]>
</script>
<div style="bottom: 25px;clip: inherit;position: fixed;right: 5px;">
<a href="#" id="toTop">
<img alt="Đầu trang" border="0" src="http://i38.servimg.com/u/f38/16/18/15/10/top10.png" />
</a>
<br/>
<a href="#" id="toMiddle">
<img alt="Giữa trang" border="0" src="http://i38.servimg.com/u/f38/16/18/15/10/giua10.png" />
</a>
<br/>
<a href="#" id="toBottom">
<img alt="Cuối trang" border="0" src="http://i38.servimg.com/u/f38/16/18/15/10/cuoi10.png" />
</a>
</div>
Nguồn: lionvip