Nút cuộn lên trên của cửa sổ bật ra động

Tìm hiểu cách tạo nút cuộn lên đầu động. Nó sẽ trượt vào từ bên cạnh trang khi bạn cuộn xuống, vì vậy bạn có thể quay trở lại đầu trang. Trên thực tế, nếu bạn cuộn xuống trang này, bạn có thể thấy nó đang hoạt động!

Nó sẽ hoạt động như thế nào

Chúng tôi sẽ thực hiện hầu hết điều này trong CSS và với một <div>phần tử ngoài màn hình . Chúng tôi sẽ cung cấp cho div này một lớp CSS được gọi là “scroll-to-top” để nó có thể có một vị trí cố định và chỉ số z cao (để làm cho nó luôn ở trên cùng). Sau đó, chúng tôi sẽ sử dụng một chút JavaScript để theo dõi việc cuộn tài liệu. Khi người xem cuộn xuống 10% chiều cao trang hoặc 300 pixel, chúng tôi sẽ thêm một lớp CSS thứ hai được gọi là "hiển thị". Khi người dùng cuộn trở lại đầu trang, chúng tôi sẽ xóa lớp "hiển thị".

Để làm cho nút cuộn lên đầu hiển thị / ẩn trơn tru, chúng tôi sẽ đặt transition:0.3sở lớp cuộn lên đầu, vì vậy trình duyệt sẽ tạo hiệu ứng chuyển đổi cho chúng tôi.

Bắt đầu

Bạn cần sử dụng một chủ đề con tùy chỉnh trên trang web WordPress của mình, vì chúng tôi sẽ chỉnh sửa functions.php.

Chúng tôi sẽ bắt đầu bằng cách tạo một số tệp giàn giáo / trình giữ chỗ để chứa mã và CSS của chúng tôi, sau đó chúng tôi sẽ kết nối nó với functions.php của chủ đề con và bắt đầu điền vào.

Trong thư mục của chủ đề con tùy chỉnh của bạn, hãy tạo một thư mục con có tên là wpt-scroll-to-top . Vào thư mục mới này và tạo hai tệp trống mới, được gọi là “ scroll-to-top.css ” và “ scroll-to-top.js “. Để trống chúng ngay bây giờ - chúng tôi sẽ dán một số thứ vào những thứ này sau.

Quay lại thư mục chính của chủ đề con của bạn, tạo một tệp mới có tên wpt-scroll-to-top.php - đây là tệp mục nhập chính của chúng tôi. Dán phần sau vào đó để bắt đầu.

// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
function wptsst_enqueue_scripts() {
   // We'll add some code in here soon...
}
add_action('wp_enqueue_scripts', 'wptsst_enqueue_scripts');

Tiếp theo, mở functions.php của chủ đề con của bạn và dán phần sau vào đó để “bao gồm” mã mới của chúng tôi.

/**
 * WP Tutorials Scroll-to-top.
 */
require_once 'wpt-scroll-to-top.php';

Lưu mọi thứ và tải lại một trang trên trang web của bạn để kiểm tra xem mọi thứ vẫn hoạt động bình thường.

Đó là một điểm khởi đầu tốt. Chúng tôi có một tệp PHP (wpt-scroll-to-top.php) nơi chúng tôi có thể đặt mã WordPress của mình và một vài tệp nội dung để bố trí và kiểm soát các bit giao diện người dùng trong trình duyệt. Bây giờ chúng ta chỉ cần điền vào chỗ trống (viết mã).

Bit WordPress / PHP

Hướng dẫn này không cần nhiều PHP. Tất cả những gì chúng ta cần làm là đưa một chút HTML vào tài liệu cho màn hình của chúng ta <div>. Chúng tôi sẽ thực hiện việc này bằng cách nối wp_footer, vì vậy ý ​​muốn của chúng tôi <div>sẽ được hiển thị ở cuối tài liệu. Bởi vì nó có position:fixed, chúng ta thực sự có thể đưa nó vào <div>bất kỳ đâu trong HTML, bởi vì vị trí của nó trên màn hình là độc lập với tất cả các phần tử khác, nhưng tôi nghĩ sẽ hợp lý khi đặt nó ở phần chân trang - không cần thiết.

Mở tệp wpt-scroll-to-top.php của chủ đề con tùy chỉnh của bạn và dán thông tin sau vào đó.

/**
* WP Tutorials Scroll to Top (WPTSST)
*
* https://wp-tutorials.tech/refine-wordpress/dynamic-scroll-to-top-button/
*/
// Block direct access.
if (!defined('WPINC')) {
exit('Do NOT access this file directly.');
}
function wptsst_enqueue_scripts() {
$theme_version = wp_get_theme()->get('Version');
$base_url = get_stylesheet_directory_uri() . '/' . pathinfo(__FILE__, PATHINFO_FILENAME) . '/';
wp_enqueue_style('scroll-to-top', $base_url . 'scroll-to-top.css', null, $theme_version);
wp_enqueue_script('scroll-to-top', $base_url . 'scroll-to-top.js', null, $theme_version, true);
}
add_action('wp_enqueue_scripts', 'wptsst_enqueue_scripts');
function wptsst_insert_offscreen_div() {
echo '<div class="scroll-to-top">';
echo '<div class="stt-inner">';
// Uncomment/edit which ever of these you want to use for your scroll-top-top icon.
// Your own image...
// echo '<img src="your-image-url.png" alt="Scroll to top" />';
// Font Awesome 4...
// echo '<i class="fa fa-hand-o-up" aria-hidden="true"></i>';
// Font Awesome 5...
echo '<i class="fas fa-hand-point-up"></i>';
echo '</div>'; // .stt-inner
echo '</div>'; // .scroll-to-top
}
add_action('wp_footer', 'wptsst_insert_offscreen_div');

Lưu ý rằng HTML thực tế mà chúng tôi đặt bên trong cuộn lên đầu của chúng tôi <div>sẽ phụ thuộc vào cách bạn muốn nó trông như thế nào trên trang web của mình. Ở đây, chúng tôi đang sử dụng FontAwesome5 để hiển thị một bàn tay hướng lên trên. Nếu trang web của bạn không có FontAwesome thì bạn có thể thêm nó hoặc sử dụng hình ảnh… hoặc bất cứ thứ gì bạn muốn.

Thêm kiểu

Mở scroll-to-top.css (trong thư mục wpt-scroll-to-top) và dán thông tin sau vào đó để bắt đầu.
/*
 * WP Tutorials : Scroll to Top.
 */
.scroll-to-top {
    font-size: 20pt;
    width: 2.5em;
    height: 2.5em;
    position: fixed;
    right: -2.5em;
    bottom: 4em;
    z-index: 1000;
    opacity: 0.0;
    transition: 0.5s;
}
.scroll-to-top.visible {
    right: 1rem;
    opacity: 1.0;
}
.scroll-to-top .stt-inner {
    background-image: linear-gradient(128deg, #0693e3 0, #9b51e0 100%);
    border: 4px solid black;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}
.scroll-to-top .stt-inner:hover {
    text-shadow: 0 0 0.5em rgba( 255, 255, 255, 0.75 );
}
.scroll-to-top .stt-inner i,
.scroll-to-top .stt-inner img {
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
Lưu ý cách chúng tôi đặt cursor:pointertrên lớp stt-inner để làm cho nó trông giống như một nút khi người dùng di chuột qua nó.

Kết hợp nó với JavaScript

Nếu bạn tải lại trang web của mình ngay bây giờ, bạn sẽ thấy rằng không có gì mới xảy ra. Đó là bởi vì cuộn lên đầu <div>luôn ở ngoài màn hình. Chúng tôi cần thêm một số JavaScript để lắng nghe sự kiện cuộn của tài liệu, sau đó quyết định khi nào chúng tôi cần thêm hoặc xóa lớp “hiển thị” cho cuộn lên đầu <div>. Mở scroll-to-top.js trong thư mục wpt-scroll-to-top và dán phần sau vào đó.
/**
 * WP Tutorials scroll-to-top
 * 
 * https://wp-tutorials.tech/refine-wordpress/dynamic-scroll-to-top-button/
 */
document.addEventListener('DOMContentLoaded', function() {
    'use strict';
    const scrollPercentageThreshold = 0.10;
    const scrollPixelThreshold = 300;
    // Diagnostics to show that our script has loaded correctly.
    // console.log('scroll-to-top : load');
    var scrollToTopContainer = document.querySelector('.scroll-to-top');
    var scrollToTopInner = null;
    if (scrollToTopContainer) {
        scrollToTopInner = scrollToTopContainer.querySelector('.stt-inner');
    }
    if (scrollToTopInner) {
        scrollToTopInner.addEventListener("click", function() {
            window.scrollTo(0, 0);
        });
        document.addEventListener('scroll', function(e) {
            var offset = window.scrollY;
            var total = document.body.scrollHeight;
            // Uncomment this to see the current scroll metrics.
            // console.log( `${window.scrollY} / ${document.body.scrollHeight}` );
            var isVisible = false;
            if ((1.0 * offset / total) > scrollPercentageThreshold) {
                isVisible = true;
            } else if (offset > scrollPixelThreshold) {
                isVisible = true;
            } else {
                // ...
            }
            if (isVisible && !scrollToTopContainer.classList.contains('visible')) {
                scrollToTopContainer.classList.add('visible');
            } else if (!isVisible && scrollToTopContainer.classList.contains('visible')) {
                scrollToTopContainer.classList.remove('visible');
            } else {
                // No change
            }
        });
    }
});
Logic hoạt động như thế này:
  • Hãy đợi cho đến khi tài liệu đưa ra sự kiện DOMContentLoaded, vì vậy chúng tôi biết rằng mọi thứ đã sẵn sàng.
  • Tìm bản sao đầu tiên của một phần tử có lớp cuộn lên đầu.
  • Trong phần tử cuộn lên đầu của chúng tôi, hãy tìm bản sao đầu tiên của một phần tử có lớp stt-inner - đây là “nút” giả mạo có thể nhấp của chúng tôi.
  • Nếu chúng tôi đã tìm thấy một stt-nội <div>
    • Thêm một trình xử lý sự kiện nhấp chuột vào stt-inner <div>.
    • Khi tài liệu tăng sự kiện cuộn…
      • Thêm / xóa “hiển thị” vào danh sách lớp của phần tử cuộn lên đầu, dựa trên vị trí cuộn dọc hiện tại của tài liệu.

Triển khai & Kiểm tra

Lưu mọi thứ, tải lại một số nội dung trên trang web của bạn và chơi với nó.
  • Hãy thử loại bỏ quá trình chuyển đổi: 0,3 giây khỏi lớp cuộn-lên-đầu trong scroll-to-top.css.
  • Tinker với JavaScript để điều chỉnh ngưỡng khi chúng tôi thêm / xóa lớp hiển thị vào <div> cuộn lên đầu.
Chúc bạn cuộn trang vui vẻ!