Có rất nhiều nội dung có nghĩa là rất nhiều cuộn. Nó giúp để làm cho mọi việc dễ dàng hơn một chút cho độc giả của bạn nếu bạn có một cách dễ dàng để chuyển tất cả các cách trở lại trên cùng của trang.
Thêm một nút Quay lại đầu có thể dễ dàng giải quyết vấn đề di chuyển và thực sự là đơn giản để thực hiện! Tôi đã bao gồm một thực sự dễ dàng nút Quay lại Lên trên đây cho bạn mà bạn có thể thêm vào bất kỳ trang web hoặc blog. Tất cả các bạn cần phải chỉnh sửa những file CSS của theme và chính các tập tin mẫu HTML.
Thêm một nút Quay lại Lên trên trang web của bạn:
Để bắt đầu, thêm này vào phần CSS của trang web của bạn. Trong Blogger, đây sẽ là dưới Template> Customize> Advanced> CSS. Trong WordPress này là file style.css của chủ đề của bạn.
.back-to-top {
display:none;
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration:none;
color:#ffffff;
}
Sau đó, hãy chắc chắn rằng trang web của bạn đang tải jQuery. Thêm mã này trong phần <head> của file HTML chính của mẫu của bạn:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </ script>
Nếu bạn đã có một kịch bản tương tự như jquery trong đó, bạn không cần phải thêm một này. Một kịch bản jQuery là đủ! Tiếp theo, thêm mã sau đây trực tiếp trước thẻ </ body> mã trong tập tin HTML chính của template. Trong Blogger, vào Mẫu> Chỉnh sửa HTML và tìm kiếm </ body> và thêm này trên nó:
<a href="#" class="back-to-top">Back to Top</a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Lưu mẫu của bạn và bạn sẽ thấy Trở về đầu trang liên kết xuất hiện khi bạn di chuyển xuống trang!
hi
ReplyDelete