Loading post navigation ...
 
 

Pro page

37
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả


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 4 thà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.


Enter your mail address:

37

An

Cảm ơn Dũng,
Mình làm được cái rank và histarts rồi. Còn cái lên đầu trang và cuối trang (mũi tên lên xuống ở góc trang của Dũng) thì không thể làm được. Dũng cho mình xin cái code này được không?
tmtvietnam.blogspot.com
tmtvietnam.co.cc

An

Chào Dũng,
Cảm ơn bạn đã hướng dẫn làm hộp logo. Mình đã làm được nhưng ví dụ mình cho cái logo blog của bạn chạy trong đó bằng hình ảnh thì làm thế nào?
tmtvietnam.co.cc

fandung

Cái buttom lên xuôgn trang đó thì cứ làm như mình hướng dẫn là được, và nhớ là thay dòng {Link ảnh} trong code thành link của ảnh, ví dụ bạn có thể dùng 2 ảnh như của mình:

Ảnh mũi tên lên:
http://farm4.static.flickr.com/3496/3463533286_ee8ffe62cd_o.gif
Ảnh mũi tên xuống:
http://farm4.static.flickr.com/3583/3437500265_69cea7f1f2_o.gif

Còn về việc cho logo chạy ảnh trong đó thì bạn cứ việc ảnh vô là xong, ví dụ bạn copy nguyên code bên dưới vào trong thẻ <marquee> là được :

<a alt="FanDung" href="http://fandung.blogspot.com" target="_blank" title="BlOg FD | Tips For Blogger"><img alt="logo BlOg FD - 121x60px" src="http://farm3.static.flickr.com/2115/3541510871_e330dd3e13_o.gif"/></a>

Khách (ẩn danh)

thêm 1 phần giữa trang nữa đc ko ta :-/

Phan Dũng

@amen : bạn muốn nói về thủ thuật gì, mình ko hiểu???

Khách (ẩn danh)

ý mình nói thủ thuật này có thêm icon click vào sẽ
đến giữa trang web ấy mà

vietutd

Ở đầu thì có title, header, menu...
Đọc bài từ đầu thì biết nó viết về cái gì


Ở cuối thì có các thông tin về tác giả, label, comment... thông tin bản quyền...
Đọc cuối thì biết đoạn kết và có một số link hữu ích

Bạn yêu cầu đoạn giữa để làm gì. Mình nghĩ chỉ có phụ nữ là đoạn giữa mới đáng quan tâm thôi. :D

Khách (ẩn danh)

mỗi người có 1 ý thích riêng bác à, ví dụ đọc 1 bài viết dài nhưng nhớ link hay nội dung gì đó quan trọng nằm ở giữa bài tương đương với giữa trang web thì ta có thể click đến giữa trang 1 cách nhanh chóng để tìm lại thông tin quan trọng đó chẳng hạn. :))

fandung

:D

Khách (ẩn danh)

Thanks FD đã update thủ thuật này, sau khi chèn code mới nó hiện dư ra ở cuối web dòng //Code JS //Code HTML

Phan Dũng

@amen :à đúng rồi, bạn xóa nó đi, dòng đó chỉ là ghi chú thôi.

fandung

Hôm nay là thứ 7 (thứ bảy máu chảy về ...dim) nên anh em đi chơi hết roài hay sao mà :-/ ... pageviews ít thế nhỉ. :|

Mr.Nguyễn

Thanks! Rất chuyên nghiệp!

Tidus Nguyen

:X

Minh Triết

@fandung.

Mới biết blog bạn... Mình vào đây thấy có tip hay quá.
Mình có thể làm cái bookmark trên cùng 1 trang được không? Ý là mình làm một bảng câu hỏi đáp, khi người đọc click vào câu hỏi thì sẽ nhảy ngay đến phần trả lời (trong cùng bài viết đó). Cái này giống như phần trợ giúp của các trang thuộc Google.

fandung

@Minh Triết : cảm ơn ý tưởng của bạn, cái này có thể thực hiện được. Hiện mình chỉ nghĩ được cách thủ công thôi, khi nào nghĩ ra cách tốt hơn thì sẽ post bài hướng dẫn luôn.

Ngankvn ®

Dzũng ới !!! Hai cái nút này lâu lâu bị Sidebar che mất tiêu :(

fandung

Thế hả Ngân, có thể là do mấy cái widget chạy từ script đè lên.

Ngankvn ®

Dzũng Ơi , mình dùng code của nút lên xuống này cho cái quảng cáo (x1.blogtruyen.com)

Mình thay đổi cho nó chỗ này để nó hiện bên trái thay vì bên phải nhưu nút lên xuống :
_position:absolute;
bottom:5px;
left:5px;

Kết quả đc như ý muốn , nhưng với IE6 thì nó lại cứ nằm bên phải , che mất một phần truyện của mình , Dũng nói CSS position này muốn hoạt động trên IE6 phải thêm một số code , vậy chỉ mình nhé !!!

fandung

nếu Ngân đã thực hiện thàh công nút lên xuống thì với cái này cũng tương tự thôi.

code này là code để nó hiển thị tốt trên IE6 (có ở trên mà)
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}

Ngankvn ®

Dũng ko hiểu mình nói gì rồi , Thế là phải giải thích lại , mệt ghê :((

Nói ngắn gọn dễ hiểu nè , coi như mình chưa nói gì đến cái QC hết , chỉ nói về hai cái nút thôi :

Giả sử bây giờ mình muốn cái nút lên xuống nó nằm bên trái thay vì bên phải thì phải làm gì ???

Mình đã làm thế này :
#top-buttom_image {
position:fixed;
_position:absolute;
bottom:5px;
right:5px;

thay cái chữ right:5px; ở trên bằng left:5px; . Kết quả là nó chịu nằm bên trái đúng như ý ( đối với FF , IE7 , opera...v.v. )

Vấn đề là trên IE6 nó vẫn nằm ở vị trí cũ (bên phải )??? Vậy thì phải làm sao để nó chịu nằm bên trái ???

Phan Dũng

à, Ngân chỉ cần đổi left thành right trong đoạn code này:

_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);

Ngankvn ®

Ok :) , hiện tại ko có IE6 để mà kiểm tra , Dzũng có thì test giùm cái :D

Phan Dũng

cái này mình đã test rồi, Ngân có thể vào đây xem demo :D, tịên thể click quảng cáo hộ

http://en-fandung.blogspot.com/

Ngankvn ®

PerFect :D

Ngankvn ®

Click một đống quảng cáo muốn đứng máy luôn đó :))

Phan Dũng

thanks nhớ, heheh, cũng đc 0.5$ :D

Nguyễn Thế Thông

Mình muốn Ẩn/Hiện nội dung bài viết của mình trong Bolgger.com phải làm sao? Mình muốn giống trang download của BKAV (http://www.bkav.com.vn/home/MuatheBkav2.aspx?d=9 ) đó, khi click vào dòng (1. Lý do bạn nên mua thẻ bản quyền BkavPro ?) thì nội dung ẩn của dòng này hiện ra, còn khi click vào dòng (2. Tính năng của BkavPro có bản quyền.) thì nội dung của dòng này hiện ra và dòng kia thì đóng lại
Ai bít thì chỉ cho mình với! Mail của mình là: dongthong@gmail.com

Chipcooi.blogspot.com

anh oi anh giup em tao code mene dang cay thu muc trong nhu cac tep cua computer ay

Bamboo

Híc em làm y chang mà chỉ có nút lên đầu trang là xài được à. Mấy cái nút khác bấm mà nó vẫn "trơ trơ"

Bamboo

Híc admins ui, giúp em với đi

Trao yêu thương

Đội ơn pác Dũng

Ngọn lửa nhỏ blog

Cảm ơn Phan Dũng,cố lên nhé

Ngọn lửa nhỏ blog

Mỗi lần chỉnh sửa lại Temp lại mò đến đây để chôm đồ của bác.Cảm ơn Dũng nhiều :)

ngonluanho.net

Cho em chôm lun cái hình của bác nhá,em xin lỗi nhiều

¯¯ i ¯¯•Kiss The Rain•¯¯ i ¯¯

Dũng ơi. thế mình muốn chèn vào trang của xtgem thì code như thế nào? code chuyển lên đầu trang ý.giúp mình với

vn KINGTEK

hay quá! làm liền mới được
-------------------------------
" Đầu thu kỹ thuật số mặt đất tại Kingtek - Xem miễn phí hoàn toàn đến hơn 60 kênh truyền hình chuẩn HD của VTV, VTC, HTV, Let's Viet, LA34, không bị ảnh hưởng tín hiệu do mưa bão, cho chất lượng hình ảnh và âm thanh sống động đến kinh ngạc.

Liên hệ: 0909 480 368 – 08 7303 1368 để biết thêm chi tiết.

Công ty TNHH Thương mại và Dịch vụ Kingtek
63 Nguyễn Thái Bình, phường 4, quận Tân Bình.
Xem thêm:
Thiết bị thu phát sóng truyền hình mặt đất
Danh sách các kênh thu được từ đầu thu kỹ thuật số
Anten chuyên dụng dùng cho đầu thu DVB T2"



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home