Home » ThuthuatBlog
Thứ Bảy, 17 tháng 12, 2011
Tạo nút bấm nhảy xuống cuối trang, lên đầu trang
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPVEJxvoZQnpdnChjbLdWcBvyfoOD1ujArVk3aCtq1Mrxp27CqfLskCr6lN6gyQE5PER31jnCeB_XfVJxBhHCq2zKs8ABIdpUDzspwWZYfV0XN8ukhBP9APnuMr1uvtnwZJyOnlRj9kOBO/s1600/vers-haut-icone-7320-128.png)
Lần trước mình đã giới thiệu cho các bạ cách tạo nút Back To Top nhưng cách đó có hạn chế là chỉ lên ngay được đầu trang không xuống được cuối trang và giữa trang, do vậy hôm nay mình giới thiệu cách mới cho các bạn khắc phục được các hạn chế đó.
Đầu tiên bạn phải có 3 tấm hình (nhỏ thôi, tầm 30x30 px), dùng để tạo 3 button : lên, xuống, và giữa.
Các bước thực hiện: (ở đây mình giới thiệu cho blogspot)
1. Đăng nhập vào blog -> vào Thiết Kế
2. Vào chỉnh sửa Code HTML
3. Chèn đọan code CSS bên dưới vào trước đọan code Code:
]]></b:skin>
Code:
#top-buttom_image {
position:fixed;
_position:absolute;
bottom:5px;
right:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
- bottom:5px; , right:5px; : 2 đoạn code này để xác định vị trí hiển thị của các button trên màn hình.
4. Chèn đọan code sau vào trước thẻ đóng </body>
4. Chèn đọan code sau vào trước thẻ đóng </body>
<script type='text/javascript'>
var maxWidth = (document.body.clientWidth);
var maxHeight = (document.body.clientHeight);
</script>
<div id='top-buttom_image'>
<a href='javascript:top.window.scrollTo(0,0)' title='Lên đầu
trang'><img alt='Lên đầu trang' border='2' src='Link
ảnh1'/></a><br/>
<a
href='javascript:window.scrollTo(maxWidth,maxHeight/2)' title='Vào giữa
trang'><img alt='Vào giữa trang' border='2' src='link
ảnh2'/></a><br/>
<a
href='javascript:window.scrollTo(maxWidth,maxHeight)' title='Xuống cuối
trang'><img alt='Xuống cuối trang' border='2' src='link
ảnh3'/></a>
</div>
Thay link ảnh bằng link ảnh của các button
Các bạn VÀO ĐÂY để kiếm thêm một số hình mũi tên, thích cái nào thì tải về upload lên, rồi lấy link hình thay vào
Chúc bạn thành công!
Nguồn http://namkna.blogspot.com
You may also...
Hot
-
Bài 2 hướng dẫn sử dụng phần mềm Simatic S7.200 để viết chương trình điều khiển cho PLC. Ngoài ra, cũng hướng dẫn sử dụng phần mềm Simulator...
-
Có khá nhiều bạn thắc mắc, gửi yêu cầu cho tôi về cách cài đặt phần mềm cho PLC của Mitsubishi. Tuy nhiên, vì quá bận nên tới nay mới hướng ...
-
Babylon là phần mềm từ điển và dịch thuật hàng đầu thế giới, cung cấp cho bạn công cụ trực quan nhất cho mọi nhu cầu dịch thuật của mìn...
-
(Traidatmui.com) – Hiện nay có rất nhiều trang website cung cấp cho bạn host miễn phí tuy nhiên không phải hosting nào cũng tốt, cũng đảm...
-
1 CÁC LỆNH VÀO / RA OUTPUT: Sao chép nội dung của bit đầu tiên trong ngăn xếp vào bit được chỉ định trong lệnh. Nội dung của ngăn xếp không ...
-
Bài 1 trình bày tổng quan về PLC S7.200, cấu trúc phần cứng, phương thức hoạt động của PLC S7.200. Đồng thời nêu những ưu điểm khi các nhà...
-
Phần mềm tiện lợi trong việc vẽ các sơ đồ mạch điện công nghiệp, được hỗ trợ đầy đủ các kí hiệu của các thiết bị dùng trong công nghiệp như...
-
Bản Ver1 do các link nhạc nằm trên host free và host này đã die, nay mình post Ver2 của nhacf. Bạn viết cũng rất chi tiết rồi nên mình ...
-
(Traidatmui.com) - Tiếp theo thủ thuật tạo bài viết liên quan cho bài viết trên blogspot , mình xin giới thiệu đến các bạn cách tạo "B...
-
http://www.mediafire.com/?ge9udq8hwhgegvu
Comments[ 0 ]
Đăng nhận xét