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ẻ

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ẻ

trống bạn chèn vào trước thẻ đóng nhé tốt nhất là chèn vào phần footer cho nó dễ kiểm soát.

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é.

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 nhé.

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/

Lượt xem: 92

Nguồn:thcsnguyentriphuong-hoavang.edu.vn Copy link