Để thuận tiện cho người dùng truy cập sử dụng website.
Thì hầu hết các website hiện nay đều có nút Back to top - hay còn gọi là về đầu trang.
Đây là một nút bấm giúp người dùng khi cuộn website xuống dưới sẽ dễ dàng quay về đầu trang mà không cần sử dụng con lăn chuột hay kéo chuột nữa. Đây là nút bấm quá thông dụng mà hầu như các bạn làm website đều sử dụng.
Mình xin chia sẻ một cách làm nút bấm dễ dàng chỉ với vài câu lệnh mà rất đẹp và hay:
Toàn bộ bạn có thể donwload tại link sau đây: "tạo nút bấm về đầu trang cho website" << link download
Đầu tiên bạn tạo 1 file style.css với nội dung:
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: rgba(232, 98, 86, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s, background-color .3s 0s;
transition: opacity .3s 0s, visibility 0s .3s, background-color .3s 0s;
}
.cd-top.cd-top--show,
.cd-top.cd-top--fade-out,
.cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s, background-color .3s 0s;
transition: opacity .3s 0s, visibility 0s 0s, background-color .3s 0s;
}
.cd-top.cd-top--show {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-top--fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .5;
}
.cd-top:hover {
background-color: #e86256;
opacity: 1;
}
@media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
@media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
Sau đó các bạn tạo 1 file: main.js với nội dung sau :
(function(){
// Back to Top - by CodyHouse.co
var backTop = document.getElementsByClassName('js-cd-top')[0],
// browser window scroll (in pixels) after which the "back to top" link is shown
offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offsetOpacity = 1200,
scrollDuration = 700
scrolling = false;
if( backTop ) {
//update back to top visibility on scrolling
window.addEventListener("scroll", function(event) {
if( !scrolling ) {
scrolling = true;
(!window.requestAnimationFrame) ? setTimeout(checkBackToTop, 250) : window.requestAnimationFrame(checkBackToTop);
}
});
//smooth scroll to top
backTop.addEventListener('click', function(event) {
event.preventDefault();
(!window.requestAnimationFrame) ? window.scrollTo(0, 0) : scrollTop(scrollDuration);
});
}
function checkBackToTop() {
var windowTop = window.scrollY || document.documentElement.scrollTop;
( windowTop > offset ) ? addClass(backTop, 'cd-top--show') : removeClass(backTop, 'cd-top--show', 'cd-top--fade-out');
( windowTop > offsetOpacity ) && addClass(backTop, 'cd-top--fade-out');
scrolling = false;
}
function scrollTop(duration) {
var start = window.scrollY || document.documentElement.scrollTop,
currentTime = null;
var animateScroll = function(timestamp){
if (!currentTime) currentTime = timestamp;
var progress = timestamp - currentTime;
var val = Math.max(Math.easeInOutQuad(progress, start, -start, duration), 0);
window.scrollTo(0, val);
if(progress < duration) {
window.requestAnimationFrame(animateScroll);
}
};
window.requestAnimationFrame(animateScroll);
}
Math.easeInOutQuad = function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
};
//class manipulations - needed if classList is not supported
function hasClass(el, className) {
if (el.classList) return el.classList.contains(className);
else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}
function addClass(el, className) {
var classList = className.split(' ');
if (el.classList) el.classList.add(classList[0]);
else if (!hasClass(el, classList[0])) el.className += " " + classList[0];
if (classList.length > 1) addClass(el, classList.slice(1).join(' '));
}
function removeClass(el, className) {
var classList = className.split(' ');
if (el.classList) el.classList.remove(classList[0]);
else if(hasClass(el, classList[0])) {
var reg = new RegExp('(\\s|^)' + classList[0] + '(\\s|$)');
el.className=el.className.replace(reg, ' ');
}
if (classList.length > 1) removeClass(el, classList.slice(1).join(' '));
}
})();
Việc cuối cùng là bạn chèn nút bấm này vào file html hay php của bạn. Top
Với code như sau: <a href="#0" class="cd-top js-cd-top cd-top--show cd-top--fade-out">Top</a>
Bài viết mới
- Hướng dẫn cách tăng tương tác facebook cá nhân cực kỳ hiệu quả - 13/12/2018 20:39
- Hướng dẫn nhúng file videos và file nhạc audio trên google drive vào website - 04/06/2018 22:02
- Hướng dẫn cài đặt chat trực tuyến vào website - 01/06/2018 19:54
- Chia sẻ module kiểm tra tên miền cho joomla - 28/05/2018 22:47
- Hướng dẫn tạo nút bấm gọi ngay trên website - 24/05/2018 14:55
Bài viết nổi bật
- Khắc phục joomla,wordpress khi bị tấn công hay chèn mã độc - 23/01/2018 05:47
- Báo giá mới nhất từ công ty thiết kế web iSing - 24/11/2017 06:38
- Xào nấu bài viết để làm bài viết mới cho website - 28/08/2017 18:19
- Chia sẻ code website rao vặt đơn giản nhưng hiệu quả - 29/03/2017 06:46
- Những yêu cầu để wordpress tải nhanh hơn - 04/10/2016 05:02