Hướng dẫn tạo nút Scroll Top trượt cho WordPress

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êmPlugin 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:

<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:

add_filter('genesis_footer_backtotop_text','raynoblog_backtop');
function raynoblog_backtop() {
	$backtotop = '""';
	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:

#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:

// 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:

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!

Hướng dẫn tạo nút Scroll Top trượt cho WordPress
2.33 (46.67%) 3 votes

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. anh cho em hỏi các nào nhưng đoạn code trên mình pass vao đoạn nào của các file trên vi dụ nhưng file Footer thi nó nằm đoạn nào vậy thank anh nhé

    • Bạn có thể đặt ngay sau một thẻ

      nào đó trong file footer.php, còn trong file functions.php thì bạn có thể cho vào cuối cùng
  2. Daniel Nguyen says:

    Bác cho em hỏi em dùng Genesis thì chèn mấy đoạn code đó vào genesis hay vào child theme. Với cả em tìm mà không thấy folder js trong theme thì làm thế nào? Thanks.

  3. Cái nút trên site của bạn cũng làm như vậy phải ko Bảo?

  4. Sao mình làm không được nhỉ ? Mình xài theme Genesis, childtheme là Metro Pro. Vậy mình có cần làm bước 1 add code vào footer.php của Genesis ?

    • Không cần đâu bác, Genesis childtheme thì đâu có file footer.php đâu bác, trong bài em có hướng dẫn cho Genesis mà, em cũng đang sài genesis đây {c6}

  5. sao mình làm y chang vậy mà nó không hiện hichic. Bạn có thể giúp mình không {c26}

  6. Tks bạn đã chia sẻ , không hiểu sao mình làm y theo các bước trên mà nó không hiện ra nhỉ, hic hic. hay web em không phù hợp nhỉ, đây là web của em : http://vken.vn

  7. Mình sử dụng theme Junkie có sẵn to-top này, mình sử dụng đoạn css của bạn, nhưng khi trượt lên đến đầu trang thì nút to-top ko ẩn đi mà nó vẫn hiện. Bạn biết nguyên nhân ko hướng dẫn mình làm cái nút đó ẩn đi khi lên top với.
    Mình cảm ơn!

  8. Mình chỉ dùng Genesis mà không cài đặt child theme, vậy thì đoạn code thứ 2, có dán vào functions.php không bạn?

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!