Hướng dẫn tạo nút lên đầu trang (back to top) hình tên lửa bằng jquery.

Xin chào, bài viết này mình sẽ hướng dẫn các bạn tạo nút lên đầu trang hay tên tiếng anh nó là back to top, Scroll to top...
Về chức năng thì nó giúp người dùng quay lên đầu trang nhanh, không phải cuộn chuột nhiều,
Demo:

Hình ảnh nút lên đầu trang (back to top)

Khi click vào hình tên lửa thì nó chạy lên trên, trông khá hay, Cái này sử dụng css và jquery, nên điều đầu tiên chúng ta phải làm là thêm thư viện jquery vào cho nó.

B1. Thêm thư viện jquery (Nếu website bạn có rồi thì có thể bỏ qua).
- Các bạn có thể download thư viện này tại trang chủ Jquery sau đó upload lên website của bạn, hoặc bạn có thể sử dụng CDN mà không cần tải về, chỉ việc nhúng đoạn code này vào trong thẻ <head>...</head>

<script crossorigin="anonymous" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" src="https://code.jquery.com/jquery-3.1.1.min.js">

</script>

B2.Thêm đoạn code css này vào trong cặp thẻ <head>...</head>

#rocketmeluncur {
  position: fixed;
  bottom: 50px;
  z-index: 7;
  display: none;
  visibility: hidden;
  width: 26px;
  height: 48px;
  right: 25px;
  background: url(http://3.bp.blogspot.com/-GZOBULN1Q4s/VbNxQrf37EI/AAAAAAAAAPk/rak337seJ70/s1600/Ask.png) no-repeat 50% 0;
  opacity: 0;
  -webkit-transition: visibility .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-transform .6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  -moz-transition: visibility .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -moz-transform .6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transition: visibility .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), transform .6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
#rocketmeluncur i {
  display: block;
  margin-top: 48px;
  height: 14px;
  background: url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) no-repeat 50% -48px;
  opacity: .5;
  -webkit-transition: -webkit-transform .2s;
  -moz-transition: -moz-transform .2s;
  transition: transform .2s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0
}
#rocketmeluncur:hover {
  background-position: 50% -62px
}
#rocketmeluncur:hover i {
  background-position: 50% 100%;
  -webkit-animation: flaming .7s infinite;
  -moz-animation: flaming .7s infinite;
  animation: flaming .7s infinite
}
#rocketmeluncur.showrocket {
  visibility: visible;
  opacity: 1
}
#rocketmeluncur.launchrocket {
  background-position: 50% -62px;
  opacity: 0;
  -webkit-transform: translateY(-800px);
  -moz-transform: translateY(-800px);
  -ms-transform: translateY(-800px);
  transform: translateY(-800px);
  pointer-events: none
}
#rocketmeluncur.launchrocket i {
  background-position: 50% 100%;
  -webkit-transform: scale(1.4, 3.2);
  -moz-transform: scale(1.4, 3.2);
  transform: scale(1.4, 3.2)
}

B3. Chèn đoạn js này vào trong cặp thẻ <body>...</body>

jQuery(window).scroll(function(){
    if(jQuery(window).scrollTop()<50){
        jQuery('#rocketmeluncur').slideUp(500);
    }else{
        jQuery('#rocketmeluncur').slideDown(500);
    }
    var ftrocketmeluncur = jQuery("#ft")[0] ? jQuery("#ft")[0] : jQuery(document.body)[0];
    var scrolltoprocketmeluncur = $('rocketmeluncur');
var viewPortHeightrocketmeluncur = parseInt(document.documentElement.clientHeight);
var scrollHeightrocketmeluncur = parseInt(document.body.getBoundingClientRect().top);
var basewrocketmeluncur = parseInt(ftrocketmeluncur.clientWidth);
var swrocketmeluncur = scrolltoprocketmeluncur.clientWidth;
if (basewrocketmeluncur < 1000) {
var leftrocketmeluncur = parseInt(fetchOffset(ftrocketmeluncur)['left']);
leftrocketmeluncur = leftrocketmeluncur < swrocketmeluncur ? leftrocketmeluncur * 2 - swrocketmeluncur : leftrocketmeluncur;
scrolltoprocketmeluncur.style.left = ( basewrocketmeluncur + leftrocketmeluncur ) + 'px';
} else {
scrolltoprocketmeluncur.style.left = 'auto';
scrolltoprocketmeluncur.style.right = '10px';
}
})
jQuery('#rocketmeluncur').click(function(){
    jQuery("html, body").animate({ scrollTop: '0px',display:'none'},{
            duration: 600,  
            easing: 'linear'
        });
    var self = this;
    this.className += ' '+"launchrocket";
    setTimeout(function(){
      self.className = 'showrocket';
    },800)
});

B4. Thêm đoạn html này vào trên thẻ </body>

<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>

B5. Lưu lại và xem kết quả.
Nếu có bất kỳ thắc mắc cần giải đáp nào vui lòng để lại bình luận dưới bài viết.

Tác giả: TranDuc

Code: Sưu tầm trên Codepen

TranDucIT Blogger

Hướng dẫn tạo nút lên đầu trang (back to top) hình tên lửa bằng jquery.

TranDuc

Tiêu đề

FANPAGE FACEBOOK

Popular Archive Label

RECENT POSTS

Random PostS

INTRODUCE

ADVERTISING

TEXT LINK