Tạo buttom nhảy lên, xuống hoặc vào giữa trang với lệnh javascript:scroll

Cập nhật ngày 20/06/2009 [FD's BlOg]  - Để 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 tr...


Cập nhật ngày 20/06/2009
[FD's BlOg] - Để 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>

<div id='top-buttom_image'>
<a href='javascript:scroll(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' border='2' src='{Link ảnh}'/></a><br/>
<a href='javascript:scroll(0,9999999)' title='Xuống cuối trang'><img alt='Xuống cuối trang' border='2' src='{link ảnh}'/></a>
</div>

- Thay code {Link ảnh} thành địa chỉ URL của ảnh mà bạn muốn hiển thị.

Chú ý: trong lệnh javascript:scroll(0,9999999) số 9999999 đặt càng lớn càn tốt, nếu đặt nhỏ quá, đối với những trang dài, nó sẽ không nhảy đến cuối trang được.
Update (20/06/2009) - button nhảy vào giữa trang
- Ngoài việc cập nhật button nhảy vào giữa trang, mình còn giới thiệu cho các bạn 1 phương thức khác giúp nhảy xuống trang 1 cách chính xác hơn.
- Các bước thực hiện hoàn toàn tương tự như trên, chỉ thay đổi code ở bước 4thành đoạn code bên dưới:

<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 các bạn thành công.

COMMENTS

Name

Banner,2,Code,8,CSS,2,DNS cho Blogger,6,Favicon,1,HTML,6,JavaScript,2,Kiếm tiền với Youtube,1,Labels,1,Mật khẩu cho bài đăng,1,Nhãn,1,Search Google,1,Template Blogger,1,theme blogger,1,Thủ thuật Blogger,45,Thủ thuật Youtube,2,Tiệc ích Password,3,Tiện ích,9,Tiện ích bài viết liên quan,2,Trang,1,Wifi,1,Xóa bản quyền,1,
ltr
item
Khám Phá Blogger: Tạo buttom nhảy lên, xuống hoặc vào giữa trang với lệnh javascript:scroll
Tạo buttom nhảy lên, xuống hoặc vào giữa trang với lệnh javascript:scroll
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzWDaaxKwB8cIEr88UzkhjQMKKetbacXVlUBSvpSB0_f7wAWuEgceW3rgzKYjOaQ9-IQGGTlb1DUaxY2eDS15rh4ZmVlYi76rabeovogRd5xTv5ZPAX1BHJOmEaGJO7dYt0Y7lY1EKWJSh/s200/rep.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzWDaaxKwB8cIEr88UzkhjQMKKetbacXVlUBSvpSB0_f7wAWuEgceW3rgzKYjOaQ9-IQGGTlb1DUaxY2eDS15rh4ZmVlYi76rabeovogRd5xTv5ZPAX1BHJOmEaGJO7dYt0Y7lY1EKWJSh/s72-c/rep.gif
Khám Phá Blogger
http://blogger.affimart.com/2012/04/tao-buttom-nhay-len-xuong-hoac-vao-giua.html
http://blogger.affimart.com/
http://blogger.affimart.com/
http://blogger.affimart.com/2012/04/tao-buttom-nhay-len-xuong-hoac-vao-giua.html
true
4203661997903332293
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy