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é!
TOP
#myBtn {
display: none;
position: fixed;
bottom: 10px;
right: 43px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function[] {scrollFunction[]};
function scrollFunction[] {
if [document.body.scrollTop > 20 || document.documentElement.scrollTop > 20] {
document.getElementById["myBtn"].style.display = "block";
} else {
document.getElementById["myBtn"].style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction[] {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Chúc các bạn thành công!
Bài viết mới cập nhập
- 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["//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: //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