jQuery – Back to top Link
- November 25, 2010
- 31 comments
Với những trang web có chiều cao lớn thì một nút bấm “Back to Top” cũng giúp người đọc tiết kiệm chút thời gian đỡ phải kéo lên trên cùng của trang. Với jQuery bạn có thể tạo ra nút “Back to top” rất thân thiện với người dùng. Nó chỉ xuất hiện khi cần thiết.
Trong bài này chúng ta cũng khám phá một khái niệm phổ biến trong thiết kế web hiện đại là Progressive Enhancement. Với những trình duyệt có JavaScript, thì nút sẽ xuất hiện, còn nếu JavaScript bị tắt thì nút của chúng ta cũng sẽ biến mất mà không làm người đọc nhầm lẫn.
Thời lượng: 9:30
Download định dạng .mp4 chất lượng cao :MediaFire
Dung lượng: 22 MB
« Tips – Virtual Directory in Apache
WordPress – Custom Taxonomies »
display:none;
DW còn thiếu phần này đó, nếu không có nó khi người dùng reload (refresh) nó sẽ hiện nút BacktoTop ra trước.
DW còn thiếu phần CSS là cho display: none; nếu không có nó sẽ tự hiện ra trước khi ta bấm F5(reload);
anh Demon Warlock ơi
demo của anh khi test trên ie 8 bị 1 lổi là ngay hình background top của mình có vòng tròn vòng đen bao quanh, lổi này trên firefox thì ko xuất hiện
anh xem hình và chỉ cách fix với nhé
http://farm3.anhso.net/upload/20111201/10/o/anhso-104954_to_den.jpg
Thực sự rất cảm ơn anh vì những bài viết vô cùng có ích, chính vì sự hướng dẫn rất chi tiết mà e cũng tập tành viết đc 1 cái site “made by me” hoàn chỉnh.
Cho border cái ảnh là none
anh cho em hỏi: khi làm về jquery thi minh có thể chèn nhiều jquery vào trong boby 1 lúc được ko anh.thì mình xắp xếp nó thế nào hả anh,hay là cứ đến phần nào thì mình hướng đối tượng lên phần đấy hả anh,thank anh nhiều,anh có thê trả lời vào mailcuar em cũng được.một làn nữa thanks anh
cái này dùng IÊ6 ,cái icon Top bị chạy ra giữa luôn và bị lệch nữa. anh fix lại nhé (^_^)
Anh bỏ hỗ trợ IÊ6 lâu rồi em. Một trình lỗi thời như IÊ6 ko đáng để mình phải bận tâm nữa.
trời, anh có biết bao nhiều % pc tại VN đang dùng IÊ6 không thế?
đã dùng css mà không fix để phù hợp với các trình duyệt hiện thời là 1 thất bại
Thay vì đặt ra câu hỏi rồi chờ đợi đón nhận dc câu trả lời, sao bạn không chủ động tìm câu trả lời nhỉ keyword “IE6 Fixed Position Fix” Tôi nghĩ ko quá 15p để bạn tìm được câu trả lời.
Ở đây nguyên nhân IE6 không hiểu(hay còn gọi là hổ trợ không đầy đủ) thuộc tính
Cách 1: Thay thế code css để đạt đựoc hiệu ứng tuơng tự
#top { width: 50px; height: 50px; position: relative; bottom: 10px; left: 800px; text-indent: -99999px; cursor: pointer; background: url(top.png) no-repeat 0 0; }Cách 2: cách này hổ trợ ie hiểu đúng thuộc tính fixed
#wrapper { width: 700px; margin: 0 auto; position:relative } #top { width: 50px; height: 50px; position:fixed !important; position: absolute; /*ie6 and above*/ bottom: 10px; left: 800px; text-indent: -99999px; cursor: pointer; background: url(top.png) no-repeat 0 0; }Để hoàn chỉnh thì bạn phải tiếp tục hack png để ie6 hiển thị đúng ảnh png trong suốt(tôi nghĩ cái này bạn nên tự tìm câu trả lời và cũng ko mất quá 15p đâu)
IE sắp tuyệt chủng rồi, may ra còn ở một quán net cũ . Bây giờ IE7,8 đã phổ dụng lắm rồi. Mai sau IE9 nữa . Nuối tiếc mãi quá khứ sao phát triển được .
@nickb: bác tỉ mỉ quá hen, thx.
@kendor: việc hack cho IÊ6 phụ thuộc vào đối tượng người đọc. Đối với những trang về công nghệ như izwebz thì Đa phần người đọc đều không còn sử dụng IÊ6 nữa. Nhưng nếu là những trang có đối tượng người đọc lớn tuổi thì mới cần hack.
Tuy nhiên theo thống kê gần đây nhất mà Anh biết thì giờ chỉ còn dưới 9% người đọc còn sử dụng IÊ6. Cho nên tùy từng trường hợp mà hack, chứ ko phải cứ thấy người ta nói hack là phải hack.
ĐỪng ai quan tâm IE 6 nữa bây h là thời đại @ rồi sài tới IE9 rồi mình cũng là dân lập trình web nhưng chưa học về jquery thấy jquery hay quá nên bắt đầu học cám ơn anh DW nhé chúc anh thành công trong cuộc sống ^^
anh DW cho em hỏi. nếu web có sử dụng mootools thì nó sẽ bị đụng với jquery. theo em biết thì trong trường hợp này mình sẽ sử dụng noConflict ( http://api.jquery.com/jQuery.noConflict/ ) nhưng saoem dùng rồi mà vẫn ko khắc phục đc gì cả. anh chỉ giúp em cái đc ko ạ. => cdnnt.info. em cảm ơn. anh pm em qua ym lun nha anh: nt_nobita ^^
Chào anh!
Em đã xem qua đoạn video “CSS Image Switcher” anh hướng dẫn. anh có cho em hỏi giờ em muốn ảnh tự động chạy như trong trang http://www.nhaccuatui.com/trang_chu thì chỉnh sửa như thế nào. anh có thể chỉ cách dùm em được không.
Em biết anh rất bận nếu anh có tài liệu có thể send em em đc khôg?
Thank !
@ kaylaximuoi
Kiến thức em tới đâu, em hỏi tới đó tiếp nhe, mong sư tỉ đừng la em
theo em biết ( theo em thui nha ) thì phần tái sử dụng code nó nằm ở phần model, trong này mình khai báo các câu lệnh truy vấn
ví vậy em nghĩ việc tái sử dụng code nằm ở phần này
vậy 1 ví dụ về việc tái sử dụng 1 câu lệnh truy vấn đại loại như insert vậy đó, khai báo 1 câu lệnh insert cho 1 table làm sao mà sau này có thể gọi lại nó dùng cho 1 table khác qua $result
@ suy nghĩ sao em nói vậy, mấy bác pro chỉ giúp , đừng chém em
Trước tiên tôi tuyên dương tinh thần tự học của bạn, bạn kg ngại sai để nói những gì bạn hiểu, thật lòng là tôi muốn giúp các bạn qua cách bạn tự học như thế. Tôi giải thích một chút thế này:
Bạn nói đúng, phần tái sử dụng là phần model, nhưng chưa chính xác chỗ này “khai báo 1 câu lệnh insert cho 1 table làm sao mà sau này có thể gọi lại nó dùng cho 1 table khác qua $result”.
Khi phát triển model, bạn hình dung mỗi model là đại diên cho một table, ví dụ: tbl_product sẽ có model_product, tbl_user có model_user,… Vì vậy, tất cả thao tác dữ liệu liên quan đến table nào thì vào đúng model của table đó mà gọi hàm.
Bạn hình dung MVC giống như công đoạn làm bánh,
- Khâu chế biến nguyên liệu, nhào nặn bột, đánh trứng (giai đoạn tạo model).
- Sau khi nguyên liệu đã sẵn sàng hết, bạn cho vào khuôn nướng, biến tấu nó thế nào theo yêu cầu khách hàng (giai đoạn control),
- Khi bánh được nướng chín, bạn chuyển qua khâu trình bày phụ trách trang trí bánh (giai đoạn view) để trưng bày cho khách hàng/người xem.
Cơ bản là như thế, khi bạn vào làm còn nhiều thứ nữa nhưng nắm nguyên tắc rồi bạn cứ tiếp tục nghiên cứu.
Hay quá cảm ơn anh, nhưng sao mới load lên nó đã xuất hiện rồi!, bỏ dc ko anh?
@Nguyễn Hửu Thỏa
Thì bạn cho thêm
$('#top').fadeOut();vào trong sự kiện $(document).ready là được mà:
$(document).ready(function() { $('#wrapper').append('<div id="top">Back to Top</div>'); $('#top').fadeOut(); $(window).scroll(function() { if($(window).scrollTop() != 0) { $('#top').fadeIn(); } else { $('#top').fadeOut(); } }); $('#top').click(function() { $('html, body').animate({scrollTop:0},500); }); });Hoặc là sử dụng phương thức .hide() thay cho fadeOut() như nhtera nói nếu như không muốn nó hiện lên chút nào.
@nhtera: ku có email không? buzz anh cái để có gì tiện liên lạc.
@Demon Warlock
email em là nguyentien8x [ @ ] gmail [ . ] com
Có việc gì thế bác
Em thấy cái hàm add thêm div vào nên để phía dưới hàm window scroll vì nếu ko làm thế thì vừa load lên người dùng sẽ thấy cái nút đó dù chưa scroll . Có gì sai mong anh DW hướng dẫn . Thanks anh , tut hay lắm
anh ơi anh cho em hỏi chút chỉ sử dụng css có thể tạo ra hiệu ứng đèn neon cho văn bản được không hả anh, nếu ko thì làm thế nào để tạo được hiệu ứng đó hả anh.
em cảm ơn anh rất nhiều
Thêm cái hiệu ứng cuộn trang lên từ từ thì hay hơn đó anh DW
Anh demon or CK có thể làm 1 video nói về mô hình MVC ở chỗ tiết kiệm code của nó , 1 ví dụ cụ thể tái sử dụng code , em đọc bài viết giới thiệu về MVC nó giúp cho lập trình viên tiết kiệm thời gian viết code , lí thuyết thì có hiểu, nhưng mơ hồ quá, em mong có 1 video để học, em cảm ơn !
Theo tôi thì thế này,
1. Vấn đề tiết kiệm code còn tùy thuộc vào qui mô dự án. Nếu bạn làm một dự án nhỏ, đơn giản nhưng xây dựng theo mô hình MVC, thì kg gọi là tiết kiệm code được. Mục đích của MVC để tiết kiệm code và thời gian cho những dự án lớn, vì sao lại như vậy? Vì dự án qui mô lớn, cấu trúc phức tạp hơn, việc debug tìm lỗi khó hơn nên bắt buộc phải tối ưu theo mô hình. Quan trọng hơn, khi áp dụng MVC, việc bảo trì dự án sau này thật sự thuận lợi hơn, bất kể người lập trình trước đó có còn theo dự án nữa hay kg.
Do đó để demo cho bạn thấy tiết kiệm code và tiết kiệm thời gian chắc phải xây dựng một dự án có qui mô, điều này kg khả thi!!?
2. Bàn về phương pháp học, tôi tin chắc rằng, khi bạn đã nắm chắc, hiểu rõ những vấn đề cơ bản cũng như nguyên tắc của nó thế nào, bạn đã có hướng để nghiên cứu tiếp theo. Vì vậy izwebz đã hỗ trợ video để bạn có cái nhìn trực quan hơn, tiếp theo là việc của bạn. Như vậy mới đúng nghĩa tự học, tự nghiên cứu và sẽ mang lại hiệu quả nhiều cho bạn.
Chúc bạn nghiên cứu tốt mô hình MVC!
cám ơn bác dw nhiều lắm video tiếp theo hy vọng bác sẽ làm video về date time từ php vào database nhân tiên đây em muốn xin bac luôn cái giao diện này để làm 1 trang bán hàng hjhj http://izwebz.com/izwebz
mong nhận được sự đồng ý của bác hjhj
Cảm ơn anh DW ! Em hỏi anh ” Nếu mình tạo phần Tut của anh thành Function được không anh ” Liệu em có thể chèn function đó vào phần muốn hiển thị, như: phần menu được không anh !. Thanhs anh
DW ơi tại sao lai báo lỗi Fatal error: Call to undefined function loopedslider_js() khi khai báo ,em làm chính xác theo video mà Random Post vẫn không chạy,thông cảm cho em vì commen ở đây vì commen bên kia không thấy anh tra lời (-_ – ).Tiện thể hướng dẫn dùm em cách đưa lên host wordpress với.
Thanks DW nhiều!!!
Òy! cái đó là function của phần jQuery Plugin Looped Slider. Chú mà khai báo trong phần PHP thì nó báo lỗi đó là đúng rồi. Xem kỹ lại video đi em, xem cả mấy phần trước nữa.
Hàm loopedslider() chỉ sử dụng trên phần < head> thôi.
Có gửi cho anh error phần này trên ie 8 và ie9 mà ko thấy anh public câu hỏi của em, đang thắc mắc nhờ anh giải đáp