Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tăng tốc độ WordPress
    • Tối ưu website WordPress
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Tạo nút cuộn trang scroll to top trong genesis

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

Chủ Nhật, 17/08/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

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

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Thiết kế giao diện full width cho genesis child theme
  2. Hướng dẫn tạo trang landing pages với Genesis Framework
  3. Thêm Favicon cho website sử dụng Genesis
  4. Hướng dẫn tạo template trong genesis
  5. Thay đổi cấu trúc tùy biến layout trong genesis child theme
  6. Di chuyển author box trong genesis
  7. Dễ dàng tùy chỉnh post info trong Genesis
  8. Cách xóa bỏ sidebar trong genesis
  9. Tùy chỉnh search box cho genesis
  10. [Genesis] Tổng hợp Code Snippets cho Genesis Framework

Chuyên mục: Wordpress Tìm kiếm: genesis

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.