Tìm hiểu phần Scroll to top, footer và tổng kết trang index.html

11/01/2013 03:12 4076

Chào mừng bạn đã quay trở lại dự án ebook hướng dẫn thiết kế theme wordpress, hôm nay chúng ta sẽ đi nghiên cứu nút scroll to top, footer và tổng kết lại trang index.html của chúng ta:

1.Scroll to top:

nút này nhằm giúp cho người xem web chuyển lên đầu trang một cách nhanh chóng.
Sau đây là code của nó

Phần html

[php]

[/php]

Phần css

[php]#message a{display:block;display:none;z-index:999;opacity:.8;position:fixed;top:100%;margin-top:-75px;left:50%;margin-left:-90px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:8px 40px 10px;background-color:#000;font-size:18px;text-align:center;color:#fff}[/php]

Phần jquery

[php]$(function () {
var scroll_timer;
var displayed = false;
var $message = $(‘#message a’);
var $window = $(window);
var top = $(document.body).children(0).position().top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 100);
});
});[/php]

2.Phần footer:

footer là nơi chứa các thông tin như địa chỉ, số điện thoại, email…

Phần html:

[php]