Cách Tạo Scroll To Top Button

Cách Tạo Scroll To Top Button


Ngày 13 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo scroll to tpp button dành cho thiết kế và phát triển website nha.

Tạo Back To Top Button

HTML

Bước đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML và thêm các thư viện CDN cần thiết như fontawesome, jquery cho chức năng này thông qua đoạn code sau đây nha:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Back To Top Button - Niemvuilaptrinh</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
<body>
    <button class="my_btn">
    <i class="fa fa-arrow-up" aria-hidden="true"></i>
  </button>
  <div class="container">
    <h1>
      <span>Niềm Vui Lập Trình</span>
        Cách Tạo Scroll To Top Button
    </h1>
    <p> Lorem ipsum dolor sit amet...</p>
    <p> Lorem ipsum dolor sit amet...</p>
    <p> Lorem ipsum dolor sit amet...</p>
    <p> Lorem ipsum dolor sit amet...</p>
    <p> Lorem ipsum dolor sit amet...</p>
    <p> Lorem ipsum dolor sit amet...</p>
    <p> Lorem ipsum dolor sit amet...</p>
    <p> Lorem ipsum dolor sit amet...</p>
    <p> Lorem ipsum dolor sit amet...</p>
    <p> Lorem ipsum dolor sit amet...</p>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>

CSS

Tiếp theo chúng ta sẽ sử dụng các thuộc tính CSS cơ bản để xây dựng giao diện và canh chỉnh vị trí nút button scroll to top với nội dung website bằng đoạn mã dưới đây nha:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap'); *{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Poppins', sans-serif;
}
.container{
 text-align: justify;
}
h1{
 background-color: #1b2a49;
 color: white;
 text-align: center;
 margin-top: 0;
 padding: 15px 0 15px 0;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 color: #bada55;
}
h1>span{
 font-size: 15px;
 display: block;
 letter-spacing: 2px;
}
p{
 line-height: 35px;
 font-size: 20px;
 letter-spacing: 0.5px;
 margin:0 20px 0 20px;
}
p:not(:last-child){
 margin-bottom: 35px;
}
.my_btn{
 height: 45px;
 width: 45px;
 background-color: #1b2a49;
 border: none;
 color: #bada55;
 position: fixed;
 bottom: 30px;
 right: 30px;
 border-radius: 5px;
 cursor: pointer;
 outline: none;
 display: none;
}
.my_btn:hover{
 transform: scale(1.05) translateY(-5px);
}

Javascript

Trong phần này mình sẽ sử dụng Jquery để tạo chức năng scroll to top và hiển thị nút button này khi người dùng scroll chuột xuống trong trang web. Và để hiểu rõ hơn bạn xem đoạn mã sau đây nha:

$(document).ready(function(){
 $(window).scroll(function(){
  if($(window).scrollTop()>300){
   $('.my_btn').fadeIn(250);
  }
  else{
   $('.my_btn').fadeOut(250);
  }
 });
 $('.my_btn').click(function(){
  $('html,body').animate(
   {scrollTop:0},400
   );
 });
});

Và kết quả bạn xem video dưới đây nha.

Còn dưới đây là dự án trên Codepen nha.

See the Pen cach tạo scroll to top button by haycuoilennao19 (@haycuoilennao19) on CodePen.

jQuery Scroll Top

jQuery Scroll Top

Kết quả bạn xem bên dưới nha.

See the Pen jQuery Scroll Top by Karen Grigoryan (@karencho) on CodePen.

Scroll to top button in React JS

Scroll to top button in React JS

Kết quả bạn xem bên dưới nha.

See the Pen Scroll to top button in React JS by Qbrid (@Qbrid) on CodePen.

Sticky Back to Top Button

Sticky Back to Top Button

Kết quả bạn xem bên dưới nha.

See the Pen Sticky Back to Top Button by yying6 (@yying6) on CodePen.

Pure CSS Scroll To Top

Pure CSS Scroll To Top

Kết quả bạn xem bên dưới nha.

See the Pen Pure CSS Scroll To Top by rolandtoth (@rolandtoth) on CodePen.

jQuery and Javascript scroll to top animated

jQuery and Javascript scroll to top animated

Kết quả bạn xem bên dưới nha.

See the Pen jQuery and Javascript scroll to top animated by damiano (@damianocel) on CodePen.

Scroll To Top HTML

Scroll To Top HTML

Kết quả bạn xem bên dưới nha.

See the Pen Back To Top by Adventures in Missions (@adventuresinmissions) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách để tạo được chức năng scroll to top html cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!