tạo back to top web

tạo back to top web

Hướng dẫn tạo back to top web blog

Hello mình sẽ hướng dẫn bạn tạn nút back to top cho web, blog , wordpess . Đối với wordpress bạn có thể dùng plugin Dynamic “To Top” Plugin bạn click để tải về cài đặt.
Khi cài đặt xong khi kéo xuống cuối web bạn sẽ thấy như thế này .

tao back to top web

tao back to top web

Plugin này giúp bạn tạo back to top web rất dễ dàng và có thể lụa chọn màu sắc co nút back to top web Ở option, mặc định sẽ không có nút trên mobile, bạn có thể chọn trên mobile bằng việc uncheck nút trên mobile.

huong dan tao back to top web

huong dan tao back to top web

Tiếp theo nếu bạn không muốn dùng plugin cho nhẹ web,việc dùng css, và javascript bằng tay có thể dùng cho website blogspot

Hướng dẫn tạo back to top web bằng code tay

bước 1: có lẽ web nào mặc định web nào cũng load sẵn jquery rồi nhỉ nếu chưa mình sẽ hướng dẫn inlcude luôn trong bước 2 ,

bươc 2: dùng code jquery trong web:

[code type=html]

<script type=”text/javascript”>
jQuery(function($) {
$(window).scroll(function() {
if($(this).scrollTop() >= 500) {
$(‘#toTop’).fadeIn();
} else {
$(‘#toTop’).fadeOut();
}
});

$(‘#toTop’).click(function() {
$(‘body,html’).animate({scrollTop:0},800);
});
});
</script>

[/code]

($(this).scrollTop() >= 500 ở đây khi bạn cuộn màn hình với chiều cao >= 500 thì nút sẽ xuất hiện , bạn có the sửa theo ý bạn.javascript này bạn có thể đặt bất kì đâu trong web.

Tiếp theo  bạn thêm html và css cho nút  back to top 

bước 3: html và css cho nút  back to top trong web ,blog

bạn sẽ thêm những dòng code này
[code type=html]

#toTop {
width:25px;
height:25px;
border:1px solid #ccc;
background:url(img/top.png) no-repeat;
padding:5px;
position:fixed; /* this is the magic */
bottom:30px; /* together with this to put the div at the bottom*/
right:10px;
cursor:pointer;
display:none;
}
[/code]

Ở cuối footer bạn thêm html , trong css bạn thêm css .trong css background bạn dùng hình cho nút back to top web.

bạn có thể xem chi tiết hướng dẫn tạo nút back to top cho blogspot tại bài viết Tạo thêm nút back to top cho blogspot với bài viết 10 jQuery ‘Back to Top’ link Solutions for Websites

Cảm ơn bạn đã xem bài viết tạo back to top web  tại website sonweb.net

Share this post

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai.