Tạo nút Back To STop trong WordPress

Đôi khi các bạn vào một trang web, thấy các bài viết có nội dung tương đối dài. Và lúc đó, các bạn muốn trở về đầu trang ngay lập tức để xem các chuyên mục khác với một hình thức nào đó thật nhanh chóng và dễ dàng. Hôm nay, Thiết kế Website WordPress sẽ hướng dẫn các tạo nút Back To Stop (nút trở về đầu trang) cho Blog WordPress với các bước đơn giản, khi độc giả đọc bài viết họ chỉ cần click vào nút đó thì sẽ được di chuyển lên trên đầu trang ngay lập tức. Chúng ta cùng bắt đầu nhé!

Hướng dẫn tạo nút Back To Stop trong WordPress

Đầu tiên, bạn  thêm đoạn code sau vào file footer.php trong theme mà bạn đang sử dụng

<a href="#" id="scrolltotop" title="Di chuyển lên trên"></a>

add_filter('genesis_footer_backtotop_text','raynoblog_backtop');
function raynoblog_backtop() {
    $backtotop = '<a href="#wrap" rel="nofollow">""</a>';
    return '<a href="#" id="scrolltotop" title="Di chuyển lên trên"></a>';
}

Tiếp đến ta sẽ thêm một số code 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;
}

Tiếp theo là tạo một file JavaScript tên là scrolltotop.js với nội dung như sau:

// 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;
        });
});

Sau đó 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ả

Vậy là Thiết kế Website đã hướng dẫn xong các bạn , hi vọng qua bài viết này các bạn sẽ tạo được cho mình một nút Back To Top thật là đẹp và làm cho blog, website của các bạn trở nên phong phú, đa dạng,  thu hút được nhiều độc giả hơn.

Cần hỗ trợ thêm inbox tại đây! Chúc các bạn thành công!