Bạn đã thấy các trang web thêm cuộn mượt mà lên đầu trang chưa? Điều này thật tuyệt khi bạn có một trang dài và muốn cung cấp cho người dùng của bạn một cách dễ dàng để quay lại từ đầu. Gần đây, một trong những độc giả của chúng tôi đã hỏi chúng tôi về việc thêm cuộn mượt mà vào hiệu ứng hàng đầu trong WordPress. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm tính năng cuộn mượt mà để đạt hiệu quả hàng đầu trong WordPress bằng jQuery.
Lưu ý: Hướng dẫn này được tạo cho người dùng trung gian DIY thoải mái chỉnh sửa chủ đề của họ. Nếu bạn muốn sử dụng phương pháp plugin, hãy sử dụng cuộn trang mềm đến plugin trên cùng. Đối với những người muốn tìm hiểu làm thế nào để làm điều này mà không cần một plugin, sau đó đọc tiếp.
Di chuyển trơn tru là gì và khi nào sử dụng nó?
Khi một trang hoặc bài đăng có nhiều nội dung, người dùng buộc phải cuộn xuống để đọc nội dung đó. Khi người dùng cuộn xuống, tất cả các liên kết điều hướng của họ tăng lên. Khi người dùng đọc xong bài viết đó, họ nên cuộn lên để xem những gì khác để làm trên trang web của họ. Cuộn đến nút trên cùng nhanh chóng đưa người dùng đến đầu trang. Bạn có thể thêm liên kết này dưới dạng liên kết văn bản mà không cần sử dụng jQuery, như thế này:
^Top
Nó chỉ đơn giản là gửi người dùng đến đầu trang và cuộn toàn bộ trang trong một phần nghìn giây. Đó là chức năng, nhưng nó giống như một cú đánh trên đường. Di chuyển mượt mà là đối nghịch với điều đó. Nhẹ nhàng vuốt người dùng lên đầu trang. Điều này tạo ra một hiệu ứng đẹp và cải thiện trải nghiệm người dùng.
Thêm cuộn trơn tru vào hiệu ứng hàng đầu với jQuery trong WordPress
Để thêm tính năng cuộn mượt mà vào hiệu ứng hàng đầu, chúng tôi sẽ sử dụng jQuery, một số CSS và một dòng mã HTML trong chủ đề WordPress của bạn. Đầu tiên hãy mở trình soạn thảo văn bản như Notepad. Tạo một tệp và lưu nó dưới dạng smoothscroll.js. Sao chép và dán mã này vào tệp:
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop()
Guarde el archivo y cárguelo en la carpeta / js / de su directorio de temas de WordPress (consulte Cómo usar FTP para cargar archivos en WordPress). Si su tema no tiene un directorio / js /, cree uno y cargue smoothscroll.js en él. Este código es el script jQuery que agregará un efecto de desplazamiento suave a un botón que lleva a los usuarios a la parte superior de la página.
Lo siguiente que debe hacer es agregar smoothscroll.js a su tema. Para hacerlo bien, colocaremos el script en WordPress (obtenga más información en nuestra guía sobre cómo agregar correctamente los scripts en WordPress). Copie y pegue este código en el archivo functions.php de su tema.
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true );
Trong đoạn mã trên, chúng tôi đã bảo WordPress tải tập lệnh của chúng tôi và cũng tải thư viện jQuery vì plugin của chúng tôi phụ thuộc vào nó. Bây giờ chúng tôi đã thêm phần jQuery, hãy thêm một liên kết thực sự vào trang web WordPress của chúng tôi để đưa người dùng trở lại đầu trang. Dán HTML này bất cứ nơi nào trong tệp footer.php của chủ đề của bạn.
Như bạn đã lưu ý, chúng tôi đã thêm một liên kết nhưng chúng tôi chưa liên kết nó với bất kỳ văn bản nào. Điều này là do chúng ta sẽ sử dụng biểu tượng hình ảnh có mũi tên hướng lên để hiển thị nút quay lại đầu trang. Trong ví dụ này, chúng tôi đang sử dụng biểu tượng 40x40px. Thêm phần này vào bảng kiểu của chủ đề của bạn.
#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}
#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}
Trong CSS ở trên, chúng tôi đã sử dụng một vị trí cố định cho biểu tượng hình ảnh của mình và chúng tôi đã sử dụng biểu tượng hình ảnh làm hình nền. Bạn có thể tải lên biểu tượng hình ảnh của mình bằng trình tải lên phương tiện WordPress và sau đó lấy URL hình ảnh để dán làm URL nền. Chúng tôi cũng đã thêm một hình ảnh động CSS nhỏ vào nút để xoay nút khi người dùng di chuyển qua nó.
Cuộn đến hiệu ứng hàng đầu cho phép người dùng quay lại từ đầu và tìm những thứ khác để làm trên trang web của bạn. Một điều khác bạn có thể làm là thêm một thanh chân trang nổi giống như thanh chúng tôi có trên trang web của chúng tôi để hiển thị nội dung nổi bật. Nếu bạn không muốn người dùng của mình cuộn lên để chia sẻ bài viết của mình, chúng tôi khuyên bạn nên sử dụng plugin nổi cho thanh chia sẻ xã hội như chúng tôi đã làm trong WPBeginner.
Chúng tôi hy vọng bài viết này đã giúp bạn thêm cuộn mượt mà vào đầu hiệu ứng trang trên trang web của bạn bằng jQuery. Đối với các ứng dụng tuyệt vời khác của jQuery trong WordPress, bạn có thể xem bài viết Câu hỏi thường gặp về jQuery accordion của chúng tôi hoặc bài viết tải hình ảnh lười biếng
Bạn có nghĩ rằng cuộn đến hiệu ứng hàng đầu là hữu ích? Hãy cho chúng tôi biết bằng cách để lại một bình luận dưới đây.
