HomeTạo nút Scroll to topKênh sẻ chia thủ thuật - phần mền - tiện ích - thủ thuật
Chủ Nhật, 27 tháng 7, 2014
Các bạn đã từng quản trị tới Website hoặc Blog chắc chắn sẽ biết đến tác dụng của code này. Nó giúp cho người xem Web, Blog khi đang ở dưới chân trang Web có thể lên ngay trên chỉ với 1 Click chuột ngay ở đó.
- Đoạn code sử dụng jquery và 1 đoạn CSS kết hợp làm bo góc nút tạo cảm giác mượt mà và rất đẹp cho người xem Web.
Demo trực tiếp tại Blog làm đẹp (Kéo thanh cuộn trình duyệt xuống để thấy)
Chỉ cần thêm đoạn code dưới đây vào phần BODY của Website hoặc Blog.
- Đối với Blogger các bạn có thể thêm vào 1 tiện ích hoặc thêm mẫu thiết kế bằng cách vào bảng điều khiển -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML) tìm tới </body> và dán code ngay trên nó
- Đối với Wordpress các bạn cũng làm tương tự bằng cách thêm vào 1 Widgets dạng Text hoặc chỉnh sửa File Footer và dán code dưới trước </body> mà không phải sử dụng Plugin nào.
Code:
Tùy chỉnh:
- https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js: : Nếu trong source của bạn có rồi thì xóa đi tránh bị đụng dẫn đến tình trạng không hiển thị.
- Scroll to Top: bạn có thể thay thế bằng chữ bạn muốn. Ví dụ: Lên đầu trang
- Đoạn code sử dụng jquery và 1 đoạn CSS kết hợp làm bo góc nút tạo cảm giác mượt mà và rất đẹp cho người xem Web.
Chỉ cần thêm đoạn code dưới đây vào phần BODY của Website hoặc Blog.
- Đối với Blogger các bạn có thể thêm vào 1 tiện ích hoặc thêm mẫu thiết kế bằng cách vào bảng điều khiển -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML) tìm tới </body> và dán code ngay trên nó
- Đối với Wordpress các bạn cũng làm tương tự bằng cách thêm vào 1 Widgets dạng Text hoặc chỉnh sửa File Footer và dán code dưới trước </body> mà không phải sử dụng Plugin nào.
Code:
<!-- Scroll to Top Starts -->
<style type='text/css'>
#MD-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:96px;background-color: #EEEEEE;background-color:#FFD45D;filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:51px;right:29px;cursor:pointer;color:#111;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#MD-StoTop").scrollToTop();
});
</script>
<a href='#' id='MD-StoTop' style='display:none;'>Scroll to Top </a>
<!-- Scroll to Top ends -->Tùy chỉnh:
- https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js: : Nếu trong source của bạn có rồi thì xóa đi tránh bị đụng dẫn đến tình trạng không hiển thị.
- Scroll to Top: bạn có thể thay thế bằng chữ bạn muốn. Ví dụ: Lên đầu trang
Chúc các bạn vui vẻ !
Bài liên quan
Comments[ 0 ]
Đăng nhận xét