Tại bài hướng dẫn này, mình sẽ hướng dẫn các bạn thêm nút Back to top (Lên trên cùng) với chuyển động mượt, chạy dần lên trên cùng...Nào ta cùng bắt đầu !
Thêm đoạn mã jQuer (Tùy chọn)
1. Nếu bạn không có đoạn mã này trong mẫu của bạn thì hãy làm theo các bước nhỏ dưới hoặc có thể chuyển tới bước tiếp theo.
2. Vào Mẫu (Template) > Chỉnh sửa HTML (Edit Html)
3. Tìm từ khóa <head> bằng cách nhấn CTRL + F
4. Dán đoạn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Làm thế nào để thêm mã jQuery nút Back To Top
1. Vào Blogger > Bố cục (Layout)
2. Bây giờ nhấn Thêm tiện ích (Add Gadget) và chọn Html/Javascript
3. Sau đó dán đoạn mã dưới đây vào.
4. Bây giờ thay thế IMAGE URL Bằng hình ảnh mà bạn muốn.<style>
.mbw-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="IMAGE URL" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.mbw-back-to-top').fadeIn(duration);
} else { //www.mybloggersworld.com
jQuery('.mbw-back-to-top').fadeOut(duration);
}
});
jQuery('.mbw-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Well done !
Nguồn: http://www.mybloggersworld.com
0 nhận xét: