- Tham gia
- 25/02/2015
- Bài viết
- 910
- Được Like
- 1,529
Khi bạn đọc một bài viết dài sẽ rất mất thời gian khi muốn cuộn về menu ở header của trang, rất nhiều website đã tạo 1 nút gọi là scroll to top hoặc back to top nằm ở góc phải giao diện. Khi nhấn vào nút này sẽ giúp bạn trở về header trang ngay lập tức.
Hình minh họa
Để thực hiện điều này các bạn chỉ cần vào style đang sử dụng, gắn đoạn code bên dưới vào cuối (nằm trên thẻ </body>) template footer
Hình minh họa
Để thực hiện điều này các bạn chỉ cần vào style đang sử dụng, gắn đoạn code bên dưới vào cuối (nằm trên thẻ </body>) template footer
Mã:
<style>
#toTop {
background: #f7f7f7;
border: 1px solid #ccc;
border-radius: 5px;
bottom: 40px;
color: #333;
cursor: pointer;
display: none;
font-size: 11px;
padding: 18px;
position: fixed;
right: 20px;
text-align: center;
}
#toTop::before {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: transparent transparent @primaryMedium; /*Đổi #198708 bằng mã màu bạn muốn*/
border-image: none;
border-style: solid;
border-width: 11px;
content: "";
height: 0;
left: 7px;
position: absolute;
top: -4px;
width: 0;
}
#toTop::after {
background-color: @primaryMedium;;
content: "";
height: 12px;
left: 13px;
position: absolute;
top: 18px;
width: 10px;
}
</style>
<div id="toTop"></div>
<script type="text/javascript">
//roll top
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
Sửa lần cuối:
Bài viết liên quan
Được quan tâm
