• Home
  • Tạo icon chạy xuống cuối trang, lên đầu trang

Tạo icon chạy xuống cuối trang, lên đầu trang

Để tiện cho việc người khác lướt blog (web) của mình, các bạn có thể tạo các nút nhảy lên đầu trang, nhảy xuống cuối trang , hoặc nhảy vào giữa trang. Bài viết này mình sẽ hướng dẫn các bạn thực hiển nó. Để cho sinh động, ta nên tạo nút bằng hình ảnh.
Đầ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
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 ]]></b:skin>

#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>

<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>
Chúc bạn thành công! 
(Hãy để lại comment dưới đây nếu bạn gặp vấn đề khi thực hiện và đó cũng là cách ủng hộ tôi)
Sưu tầm

Recent News

[latest][5][recentright]

TOGGLE CONTENT

NASA Website SEND YOUR NAME TO MARS
Layout Builder with dozens of easy to use elements
Just change the contents and everything done in minutes
Content Importer, to easily setup your site
With one click you get a site very similar to the theme demo.
Many layout styles
Lots of beautiful interactive elements like slideshows, galleries, tabs, toggles that help you showcase your best work
Responsive Layout and High Resolution Display
Works beautiful on modern high resolution displays: Smarthpones, iPads, Retina MacBooks, etc