Hướng dẫn back to top css - quay lại đầu trang css


3 năm trước, Code website hay dùng, 4089 Lượt xem4089 Lượt xem

Bạn muốn làm cho website mình sinh động hơn, tăng tương tác người dùng hơn với Scroll Back To Top, thì đây là bài viết dành cho bạn!

Hi! hôm nay nhân dịp netweb.vn làm cho khách hàng cái nút back to top tiện hướng dẫn mọi người code này luônnetweb.vn làm cho khách hàng cái nút back to top tiện hướng dẫn mọi người code này luôn

  • Xem demo ở đây

Xem demo ở đây

Và sau đây là code, các bạn sẵn chèn vào header của trang là xong nhé!







Chúc các bạn thành công!

Bài viết mới cập nhập

  • Hướng dẫn back to top css - quay lại đầu trang css

    Quản lý mẫu web phòng khám

    4 tháng trước, 199 Lượt xem199 Lượt xem

    Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

  • Hướng dẫn back to top css - quay lại đầu trang css

    Sửa lỗi Error: MySQL shutdown unexpectedly – tắt Mysql xampp không đúng cách

    5 tháng trước, 239 Lượt xem239 Lượt xem

    Chào các bạn hôm nay netweb.vn sẽ hướng dẫn các bạn dùng xampp khi bị lỗi Error: MySQL shutdown unexpectedly di tắt mysql không đúng…

  • Hướng dẫn back to top css - quay lại đầu trang css

    Quản lý mẫu web công ty

    7 tháng trước, 208 Lượt xem208 Lượt xem

    Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

  • Hướng dẫn back to top css - quay lại đầu trang css

    Sửa lỗi Error: MySQL shutdown unexpectedly – tắt Mysql xampp không đúng cách

    5 tháng trước, 239 Lượt xem434 Lượt xem

    Chào các bạn hôm nay netweb.vn sẽ hướng dẫn các bạn dùng xampp khi bị lỗi Error: MySQL shutdown unexpectedly di tắt mysql không đúng…

  • Hướng dẫn back to top css - quay lại đầu trang css

    Quản lý mẫu web công ty

    7 tháng trước, 208 Lượt xem198 Lượt xem

    Quản lý mẫu web dự án bất động sản

Hướng dẫn back to top css - quay lại đầu trang css

Hướng dẫn back to top css - quay lại đầu trang css

Nút Back To Top hay còn gọi một cách đơn giản là nút trượt lên trên khi bạn đang ở cuối website. Nhưng nếu như bạn đang sử dụng framework thì sẽ có một số framework có sẵn nhưng đa phần thì cái này sẽ loại khỏi bộ framework bởi độ ưu tiên cao cũng như nó cũng không khó và phức tạp gì cả. Nhưng bạn đang cầm tìm một nút “Back To Top” hoạt động mượt mà uyển chuyển thì Thịnh chia sẻ với bạn đoạn mã tạo nút “Back To Top” cho bạn. hay còn gọi một cách đơn giản là nút trượt lên trên khi bạn đang ở cuối website. Nhưng nếu như bạn đang sử dụng framework thì sẽ có một số framework có sẵn nhưng đa phần thì cái này sẽ loại khỏi bộ framework bởi độ ưu tiên cao cũng như nó cũng không khó và phức tạp gì cả. Nhưng bạn đang cầm tìm một nút “Back To Top” hoạt động mượt mà uyển chuyển thì Thịnh chia sẻ với bạn đoạn mã tạo nút “Back To Top” cho bạn.

Để có được nút backtotop thì bạn cần phải biết chút ít jquery, html và css. Khi bạn viết đoạn code này nó sẽ được tính theo dạng như sau, khi bắt đầu kéo xuống thì nút backtotop bắt đầu hiện lên và cho tới tận khi bạn kéo thanh cuộn xuống cuối site. Nhưng khi bạn click vào nó thì nó sẽ tự động nhảy về trên đầu trang theo dạng trượt  và nó sẽ tự ẩn đi theo tính toán sẵn.backtotop bắt đầu hiện lên và cho tới tận khi bạn kéo thanh cuộn xuống cuối site. Nhưng khi bạn click vào nó thì nó sẽ tự động nhảy về trên đầu trang theo dạng trượt  và nó sẽ tự ẩn đi theo tính toán sẵn.

Nhưng điều quan trọng nữa là bạn cần thiết kế nút “Back To Top” đẹp hợp với site thì người dùng mới có cảm tình sử dụng nó.

Sau đây là hướng dẫn viết đoạn mã nút backtotop dành cho bạn.

Đầu tiên bạn cần soạn đoạn html như sau

Back To Top

Tiếp đến bạn viết đoạn css để trình bày hiển thị cũng như cho nó sang bên góc phải bên dưới màn hình như Thịnh đang sử dụng trên chính blog của thịnh

/* back to top */
a.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 10px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #3097D1 url("https://thinhweb.com/wp-content/themes/thinhweb/images/cd-top-arrow.svg") no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
a.cd-top.cd-is-visible, a.cd-top.cd-fade-out, .no-touch a.cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}

a.cd-top, a.cd-top:visited, a.cd-top:hover {
color: #CCCCCC;
text-decoration: none;
}

a.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
a.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: 1;
}

Tiếp đến bạn truy cập đường dẫn lấy hình ảnh nút backtotop của Thịnh: https://thinhweb.com/wp-content/themes/thinhweb/images/cd-top-arrow.svg

Tiếp theo bạn tạo một file backtotop.js và gọi đường dẫn tới file backtotop.js. Trong đó bạn soạn đoạn code như sau để nó thực thi tính toán khi đến vị trí thích hợp nó ẩn và hiện nút “Back To Top” bên trên.

jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');

//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});

//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});

});

Như vậy là xong, đơn giản chỉ có vậy thôi. Chúc các bạn thành công