Nút lên đầu trang là ứng dụng khá tiện lợi đặc biệt cho các blog có nội dung bài viết tương đối dài, lúc đó thay vì độc giả phải cuộn chuột hoặc kéo thanh trượt dọc khá mất công thì họ chỉ cần click để lên đầu của trang web. Sau đây Blog Mạng Lưới Toàn Cầu sẽ cùng bạn tiến hành.
Trước hết bạn vào Mẫu rồi nhấn Chỉnh sửa HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow34.js"></script>
<noscript>Not seeing a <a
href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go
to our FAQ page for more info.</noscript>
Dưới đây là hình ảnh cho dễ thao tác:
Nếu bạn muốn có nhiều mẫu nút nhấn khác thì vào trang: http://www.scrolltotop.com/ để xem thêm.
# Code nâng cao: Các thao tác ở trên là đủ cho đa phần mọi người, nhưng nếu bạn muốn cá nhân hóa nút lên đầu trang và đồng thời bạn cũng là người am hiểu về code thì thông tin dưới đây sẽ hữu ích.
Bạn có thể tạo riêng một file JavaScript cho bản thân tương tự nội dung của liên kết: http://arrow.scrolltotop.com/arrow34.js
Nơi thích hợp nhất để lưu trữ file JavaScript miễn phí với tốc độ cao là sử dụng Google Drive. Nếu chưa rõ cách làm, bạn có thể đọc bài hướng dẫn sử dụng Google Drive lưu JavaScript để biết cách thực hiện, nó sẽ cho bạn một file JavaScript tương tự như là bạn up lên hosting trả phí vậy.
Với việc tự host file JavaScript bạn có thể thay đổi tùy thích bất cứ hình ảnh nào của nút Lên Đầu Trang. Bạn chỉ cần up ảnh đó lên Blogspot (hoặc host nếu là WordPress), lấy link mới này thay thế vào đường dẫn ảnh cũ, như vậy là OK. Đoạn có màu chính là nơi mà bạn cần thay link ảnh.
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy0smI1HXrc1bbNH7C9QyLdhyphenhyphencudxHfTvOp4zFAZcD_oWZGU8DX0LHmSvFFYPEN_t8PWSbkRiKgmCUxX-c8s7XRqfILEF3CdwSO-Iq76ZNICprr1ZTQsG-ZLC_MfVpbTXvVPrXu3Z2bQ/s1600/go-to-top.png" />'
Đoạn code của tôi:
<!-- scroll to top -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://googledrive.com/host/0BxKUKf8tfKupaW5kNkozVjVFUE0/' type='text/javascript'/>
<!--Hết code lên đầu trang-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://googledrive.com/host/0BxKUKf8tfKupaW5kNkozVjVFUE0/' type='text/javascript'/>
<!--Hết code lên đầu trang-->
Cuối cùng là một cách khác nữa! Nếu bạn không muốn phụ thuộc vào JavaScript và thích tốc độ tải trang nhanh hơn thì đây là cách hay, tuy nhiên hiệu ứng trượt lên trên sẽ không mượt và đẹp như dùng JS được. Đoạn code (bạn để đoạn này ở footer):
<a href="#navbar" style="float: right;"><img alt="Lên Đầu"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy0smI1HXrc1bbNH7C9QyLdhyphenhyphencudxHfTvOp4zFAZcD_oWZGU8DX0LHmSvFFYPEN_t8PWSbkRiKgmCUxX-c8s7XRqfILEF3CdwSO-Iq76ZNICprr1ZTQsG-ZLC_MfVpbTXvVPrXu3Z2bQ/s1600/go-to-top.png"
title="Lên Đầu" /></a>
Cái bạn cần chú ý là đoạn href="#navbar", đây chính là id của div chứa menu, khi nhấn vào liên kết này ta sẽ được đưa lên menu - tức là đầu trang. Giữa 2 cặp thẻ đóng và mở a bạn có thể để ảnh hoặc chữ tùy theo ý thích, nếu để ảnh thì nên up ảnh đó lên rồi lấy liên kết của ảnh đó paste vào đoạn sau src. Trường hợp đoạn code trên không hoạt động ở trang web của bạn thì nghĩa là id navbar không tồn tại ở giao diện của bạn. Để tìm tên của phần đầu trang bạn có thể dùng add-on Firebug.
P/S: Tổ hợp phím Ctrl + Home sẽ giúp bạn lên đầu trang mà khỏi cần phải nhấn nút nào - đáng tiếc không phải ai cũng biết điều này, và dù sao đi chăng nữa nhấn nút cũng nhanh hơn.
Không có nhận xét nào:
Đăng nhận xét