Cách tạo nút Back To Top mượt mà trên Blogger
26 April
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>