Tạo nút cuộn trang scroll to top trong genesis

Genesis có sẵn nút back to top nằm ở widget đầu tiên của phần footer, một thành phần được xây dựng bởi genesis có sử dụng shortcode nên khá thuận tiện.

Nút back to top tạo bởi filter genesis_footer_backtotop_text. Thêm vào functions.php genesis child theme đoạn code sau để kích hoạt tính năng back to top:

add_filter('genesis_footer_backtotop_text', 'custom_footer_backtotop_text');
function custom_footer_backtotop_text($backtotop){
	$backtotop = '[footer_backtotop text="Top"]';
	return $backtotop;
}

Tham số $backtotop được truyền vào hàm là nội dung mặc định của nút. Nội dung này là shortcode cấu tạo tính năng nút mặc định sẽ là [ footer_backtotop ] với nhãn “Return to top of page“, bạn có thể tùy biến tính năng sử dụng của shortcode này như ở trên. Sử dụng thuộc tính text nếu muốn thêm nhãn cho nút back to top [ footer_backtotop text="Lên đầu trang" ].

Trong trang mình để dấu cách trong shortcode vì sẽ hiển thị nguyên mã shortcode để bạn tiện theo dõi, nếu muốn copy thì nhớ bỏ dấu cách ở đầu và cuối shortcode đi nhé

Tuy nhiên bạn cũng có thể tạo riêng cho mình nút back to top thành scroll to top hoặc tạo mới shortcode của nút không sử dụng shortcode mặc định của genesis. Copy đoạn code dưới đây vào functions.php

add_shortcode('footer_custombacktotop', 'set_footer_custombacktotop');

function set_footer_custombacktotop($atts) {
	
	return '<a href="#" class="top">Top</a>';

}

Sửa lại filter genesis_footer_backtotop_text thay bằng tên shortcode mới tạo ở trên.

add_filter('genesis_footer_backtotop_text', 'custom_footer_backtotop_text');

function custom_footer_backtotop_text($backtotop){

	$backtotop='[footer_custombacktotop]';

	return $backtotop;

}

Scroll to stop

Genesis không hỗ trợ tính năng scroll to top, nghĩa là khi bạn ấn vào nút trang sẽ nhảy lên đầu trang một cách đột ngột chứ không chạy thanh cuộn từ từ. Để thêm tính năng này chúng ta cần sử dụng thêm jquery. Đoạn js sau được thêm vào cuối thẻ body bằng cách sử dụng action hook wp_footer. Chép tiếp đoạn code này vào functions.php

<?php
//* Add smooth scrolling for any link having the class of "top"
add_action('wp_footer', 'go_to_top');
function go_to_top() { 
?>
<script type="text/javascript">
 $(function() {	
	$('a.top').click(function() {	
         	$('html, body').animate({scrollTop:0}, 'slow');
		return false;
	});
});
});
</script>
<?php 
}
?>

Sử dụng plugin jquery Smooth scroll

Nếu không thích sử dụng tính năng back to top sẵn có này, bạn cũng có thể loại bỏ nó ra khỏi genesis framework và tạo mới nút scroll to top cho website bằng wordpress plugin.

add_filter('genesis_footer_backtotop_text', 'custom_footer_backtotop_text');
function custom_footer_backtotop_text($backtotop){
	return '';
}

Hoặc xóa nó đi:

remove_filter('genesis_footer_backtotop_text','sp_footer_backtotop_text');

Xem cách thêm nút scroll to top cho wordpress sử dụng jquery Smooth scroll tại đây.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook