Code nút về đầu trang sử dụng CSS & jQuery - Thcs Nguyễn Tri Phương
Scroll To Top
TRANG CHỦ TRANG CHỦ

TRANG CHỦ » WINDOWS » Thủ thuật máy tính » Thủ thuật Blogspot

Code nút về đầu trang sử dụng CSS & jQuery

Đăng lúc: Thứ hai - 22/12/2014 01:22 | Người đăng bài viết: admin | Đã xem: 1517 | Phản hồi: 0
Code nút về đầu trang sử dụng CSS & jQuery

Code nút về đầu trang sử dụng CSS & jQuery

Với một trang website dài thì việc kéo con lăn về đầu trang rất mất nhiều thời gian, có rất nhiều cách để trở về đầu trang như đơn giản chỉ cần đặt một id=”top” trong thẻ div phần đầu trang sau đó dùng thẻ

Với một trang website dài thì việc kéo con lăn về đầu trang rất mất nhiều thời gian, có rất nhiều cách để trở về đầu trang như đơn giản chỉ cần đặt một id=”top” trong thẻ div phần đầu trang sau đó dùng thẻ <a>

<a href=”#top”></a>

Tuy nhiên việc này tạo cảm giác cứng, giật cục chính vì thế để cho nó mượt mà người ta mới thêm vào đó một chút jQuery sau đây mình xin hướng dẫn các bạn tạo nút về đầu trang sử dụng jQuery. Đây là code có sẵn bạn chỉ cần thao tác theo các bước mình hướng dẫn là được các bạn có thể xem demo tại đây: http://hangorder.com (bên dưới góc phải khi bạn cuộn trang xuống dưới nó mới hiển thị nhé)

Bước 1. Code html nút về đầu trang

Đơn giản là nó chỉ là một thẻ <div> trống bạn chèn vào trước thẻ đóng </body> nhé tốt nhất là chèn vào phần footer cho nó dễ kiểm soát.

<div id=”goTop”></div>

Bước 2. Code Css cho nút về đầu trang

Dưới đây là css tuy nhiên đây chỉ là css cho cái ảnh của mình thôi, nếu bạn dùng buttom khác thì phải chỉnh lại nó mới chính xác nhé, mình sẽ gửi ảnh của mình ở dưới cũng khá là đẹp bạn có thể coppy về dùng nhé.
#goTop {
background: url(images/gotop.png) no-repeat;
bottom: 40px;
cursor: pointer;
display: none;
height: 50px;
position: fixed;
right: 11px;
width: 50px;
overflow: hidden;
z-index: 1000;
}
/*hover nếu bạn sử dụng image của mình*/
#goTop:hover{ background-position-x: -57px;}

Ảnh của mình đây, hình 1 là mặc định hình 2 là khi hover chuột vào nhé.

gotop

 

Bước 3: Code jQuery nút về đầu trang

Dưới đây là code jQuery nút về đầu trang các bạn có thể coppy và pate vào trước thẻ đóng </body> nhé.

<!– go top –>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js” type=”text/javascript”></script>

<script type=”text/javascript”> $(function() {

$(window).scroll(function() {

if ($(this).scrollTop() > 100)

$(‘#goTop’).fadeIn();

else

$(‘#goTop’).fadeOut();

});

$(‘#goTop’).click(function() {

$(‘body,html’).animate({scrollTop: 0}, ‘slow’);

});

});

</script>

Kết luận

Thêm một tý jQuery nữa làm site của bạn mềm mại và lung linh hơn nhiều, nhất là mới những trang dài thì rất cần code nút về đầu trang như thế này.

Chúc bạn thành công!!
http://hocseowebsite.com/code-nut-ve-dau-trang-su-dung-css-jquery/

Về đầu bài viết

Tổng số điểm của bài viết là: 5 trong 1 đánh giá
Click để đánh giá bài viết

Những tin mới hơn

Những tin cũ hơn

 
QUY ĐỊNH THỜI GIAN VÀO LỚP. NĂM HỌC 2015 - 2016
Xem tại đây
Download tại đây
Khó khăn cũng giống như … chiếc máy giặt Nó sẽ quăng ta, vặn ta rồi lại ném ta vòng vòng.

LỊCH CÔNG TÁCღ

THÀNH VIÊNღ

LỊCHღ


BẢN ĐỒ HÀNH CHÍNHღ

THỐNG KÊ TRUY CẬPღ

Đang truy cậpĐang truy cập : 18

Máy chủ tìm kiếm : 1

Khách viếng thăm : 17


Hôm nayHôm nay : 910

Tháng hiện tạiTháng hiện tại : 17735

Tổng lượt truy cậpTổng lượt truy cập : 3330963

THĂM DÒ Ý KIẾNღ

Bạn biết http://thcsnguyentriphuong-hoavang.edu.vn qua:

Bạn bè, người thân

Công cụ tìm kiếm (Cốc Cốc, google, Bing...)

Quảng cáo (tạp chí, băng đĩa,...)

Lựa chọn khác

MỖI LÚC MỘT NỤ CƯỜIღ




Trang web hiển thị tốt nhất với trình duyệt Coccoc, FirefoxGoogle Chrome và cài Flash Player với độ phân giải 1024x768 pixels trở lên!
Website được thiết kế bởi: Phạm Văn Phương - trường thcs Trần Quang Khải
Hỗ trợ thiết bị di động.   Liên hệ kỹ thuật