Hướng Dẫn Tạo nút Back To Top Cuộn Mượt Cho Blogspot
Back To Top công dụng của nó là giúp người đọc khi kéo xuống cuối bài viết để đọc, thay vì phải cuộn lên trên thì chỉ nhấn nút này là sẽ trở về đầu trang ngay lập tứcĐược thiết kế bởi CSS và Javascript nên hiệu ứng cuộn rất mượt mà giúp blog trở nên dễ tuỳ biến hơn.
Tạo nút Back To Top cuộn mượt cho blogspotCách thêm nó vào blog như sauBước 1: Truy cập Blogger - Mẫu - Chỉnh sửa HTML đặt mã sau vào cặp thẻ <head>....</head>1<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>Bước 2: Bạn tìm đến thẻ ]]></b:skin> và đặt CSS sau lên trên thẻ đó
12345678910111213141516171819202122232425262728293031323334.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ước 3: Bạn tìm đến thẻ </body> sau đó dán code sau lên trên thẻ đó
123456789101112131415161718192021222324252627282930<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>
Cuối cùng lưu mẫu lại và xem thế quả. Chúc bạn thành công !
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;
}
<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>
![[NTH - 1 Click] AIO Software Silent Plus Version 6.0 by Nathan Nguyễn](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_PAlWwhS44_ivEX7HoOwwl_gvwf7fjPgXAU-ZddlKBFBE317ymkaYx8WEtS4KU3TAZM7pB8Tkhuqn0niDjUVxQ5WQ_S_VazeiSutHVGsjY_H7nZX5h8x6oX08pE69X7Rhz2bYKeNEb_P/s72-c/111.jpg)
