Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Cách tạo nút Back To Top mượt mà trên Blogger

How to Install Smooth Back To Top Button on Blogger

Cách tạo nút Back To Top mượt mà trên Blogger


Nút Quay lại Đầu trang:

Xin chào các bạn, Chào mừng các bạn đến với Voztheme hôm nay chúng ta sẽ tìm hiểu cách tạo
Cài đặt Nút Quay lại Đầu trang mượt mà trên Blogger. Cài đặt nút Quay lại đầu trang mượt mà trên Blogger rất đơn giản và dễ dàng ... Vậy bây giờ chúng ta cùng xem cách tạo nút Quay lại đầu trang mượt mà trên Blogger.
Chỉ cần làm theo quy trình đơn giản dưới đây để Cài đặt Nút Quay lại Đầu trang mượt mà trên Blogger.

Hướng dẫn:

  • Đi tới Blogger
  • Sau đó nhấp vào Chỉnh sửa HTML
  • Bây giờ hãy tìm <head> trên HTML của bạn
  • Sau đó dán mã HTML này vào bên dưới nó.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
  • Sau khi dán mã này, bây giờ Tìm]]> </ b: skin>
  • Và Dán CSS đã cho này lên trên nó.

.smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#2ba6e1;
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:5px;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.smoothscroll-top:hover {
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
.smoothscroll-top i.fa {
line-height:inherit;
}
  • Bây giờ Tìm </body> Sau đó dán thẻ jQuery Trên </body>.
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});
$('.smoothscroll-top').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>
  • Nếu bạn muốn có Hiệu ứng Thoát khi cuộn thì Dán cái này cho jQuery Trên đây </body>
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});
$('.smoothscroll-top').on('click', scrollToTop);
});

function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>
Đối với cài đặt màu sắc và các cài đặt khác, bạn có thể chỉnh sửa lại CSS theo trang web của mình, đó là tất cả từ tôi. Chúc một ngày tốt lành, hy vọng bài viết này giúp ích được cho bạn.

Post a Comment