Các bạn có thể nhìn thấy phía bên phải blog của mình, khi các bạn cuộn trang xuống dưới sẽ xuất hiện một nút mũi tên đi lên, gọi là nút Scroll To Top hay Back To Top, các bạn click vào đó thì sẽ được di chuyển lên trên đầu trang. Nút này cần thiết khi bạn có một trang bài viết dài và bạn muốn người xem có thể di chuyển trở lại lên đầu trang một cách nhanh chóng. Ở bài viết này mình sẽ hướng dẫn các bạn tạo ra một nút giống như thế.
Xem thêm: Plugin tạo nút Scroll Top trượt đẹp mắt cho WordPress
Trước tiên, bạn thêm đoạn code sau vào file footer.php trong theme của bạn:
|
1 |
<a href="#" id="scrolltotop" title="Di chuyển lên trên"></a> |
Đối với các bạn sử dụng Genesis child themes đã có sẵn dòng chữ Back to top ở bên dưới footer, bạn có thể chỉnh sửa nó bằng cách thêm code sau vào file functions.php:
|
1 2 3 4 5 |
add_filter('genesis_footer_backtotop_text','raynoblog_backtop'); function raynoblog_backtop() { $backtotop = '[footer_backtotop text=""]'; return '<a href="#" id="scrolltotop" title="Di chuyển lên trên"></a>'; } |
Tiếp theo ta sẽ thêm một số lớp css vào file style.css trong theme:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#scrolltotop { height: 40px; width: 40px; position:fixed; bottom:50px; right:10px; text-indent:-9999px; display:none; background: url(images/top.png) no-repeat; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } |
Bạn phải chuẫn bị một ảnh kích thước 40x40px với tên là top.png và đặt vào folder images trong theme của bạn.
Tiếp theo là tạo một file JavaScript tên là scrolltotop.js với nội dung:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// JavaScript Document jQuery(document).ready(function($){ $(window).scroll(function(){ if ($(this).scrollTop() < 200) { $('#scrolltotop') .fadeOut(); } else { $('#scrolltotop') .fadeIn(); } }); $('#scrolltotop').on('click', function(){ $('html, body').animate({scrollTop:0}, 'fast'); return false; }); }); |
Lưu file này vào folder js trong theme của bạn. Đoạn jQuery trên sẽ giúp hiển thị nút croll to top khi bạn cuộn trang xuống phía dưới. Nhưng để đoạn jQuery trên hoạt động, bạn phải thêm một đoạn code sau vào file functions.php trong theme:
|
1 2 3 4 |
add_action( 'wp_enqueue_scripts', 'scroll_top' ); function scroll_top () { wp_enqueue_script( 'scrolltotop', get_stylesheet_directory_uri() . '/scrolltotop.js', array( 'jquery' ) ); } |
Bây giờ bạn có thể nhấn F5 để xem lại kết quả.
Ngoài việc sử dụng để tạo nút croll to top, bạn có thể ứng dụng đoạn jQuery trên vào một số việc khác tương tự. Nếu các bạn gặp rắc rối với các đoạn code, bạn có thể lựa chọn sử dụng một plugin có chức năng tương tự là WPFront Scroll Top. Chúc bạn thành công!
