Nút trở về đầu trang thô bằng Javascript cho Blogger

Nút trở về đầu trang là một trong những nút rất hữu ích và lượng người tương tác vào nút này cũng khá nhiều. Từ lúc thay giao diện hiện tại bây giờ đang sử dụng trên blog của mình đây, mình rất phân vân việc chèn jQuery vào chỉ để làm cái nút này cho blog vì việc sử dụng jQuery cho blog làm tương đối xấu đi điểm số ở trên Google PageSpeed Insight.

Nút trở về đầu trang bằng Javascript

Thế là mình cũng có thời gian ngắn tìm hiểu coi trên mạng có cái nào đoạn Javascript nào viết được cái nút này không. Và mình đã tìm được một cái mặc dù là không được toàn bộ tính năng cũng như độ mượt nhìn cho thật đẹp mắt, nhưng nó đủ nhu cầu hiện tại của mình. Thì ở đây mình xin chia sẻ với những bạn có nhu cầu cái nút trở về đầu trang thô bằng Javascript mà blog mình đang sử dụng.

Thêm nút trở về đầu trang thô vào Blogger

Nếu bạn nào đang tìm kiếm nút trở về đầu trang mượt mà bằng jQuery thì trước đây mình cũng đã có một bài viết chia sẻ "Thêm nút trở về đầu trang vào Blogger" mời các bạn xem qua. Chúng tiếp tục với nút trở về đâu trang thô ở đây thôi.

Đầu tiên các bạn chèn đoạn Javascript sau đây lên trên thẻ </head>

<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var appended = false, bookmark = document.createElement("div");
bookmark.id = "arrowUp";
bookmark.innerHTML = "<a href=\"#\" title=\"Trở về đầu trang\">&uarr;<\/a>";

onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 500) {
    if (!appended) {
      document.body.appendChild(bookmark);
      appended = true;
    }
  } else {
    if (appended) {
      document.body.removeChild(bookmark);
      appended = false;
    }
  }
};
}
//]]></script>

đoạn Javascript này rất đơn giản, khi mà trình duyệt cuộn xuống dưới 500px kẻ tử đầu trang, đoạn mã này sẽ tạo ra một thẻ như thế này

<div id="arrowUp"><a href="#" title="Trở về đầu trang">↑</a></div>

thông thường thì với thẻ a mà bạn đặt cho thuộc tính href của nó là "#" có nghĩa là không có gì hết, và khi người dùng nhắp vào nó sẽ tự động nhảy lên đầu trang web.

Tiếp tục thôi, sau khi chèn xong đoạn Javascript thì tiếp đến bạn chèn đoạn css sau đây lên trên thẻ ]]></b:kin>

#arrowUp {
  position: fixed;
  height: auto;
  width: auto;
  right: 15px;
  bottom: 10px;
  font-size: 48px;
}
#arrowUp a {
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-family: serif;
}

bạn có thể dùng css để thay thế hình ảnh hiển thị của cái nút trở về đầu trang. Ở trên đây mặc định đoạn Javascript tạo ra ký tự mũi tên, và đoạn css này chỉ có tác đụng căn chỉnh màu sắc, kích thước và vị trí của nút trở về đầu trang thôi. Bạn có thể dễ dàng thay thế nút này bằng hình ảnh bằng việc sử dụng thuộc tính background trong css.

Lời kết

Đối với với điểm số trên Google PageSpeed mặc dù là thế, mình cũng thích để đẹp cho mấy bác xem thôi, chứ đối với tốc độ thực tế thì nếu bạn không lạm dụng jQuery nhiều quá, chỉ sử dụng một số tính năng cần thiết và nhỏ như nút trở về đầu trang thì thôi thì nó hoàn toàn không làm giảm tốc độ tải trang là bao nhiêu cả.

Nguồn KslZon.Net

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..