Để 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>