Hướng Dẫn Tạo Nút Lên Đầu Trang ( Scroll To Top ) Blogger

Hiện nay rất nhiều cách để tạo nên tạo nên nút lên đầu trang hay được gọi là Scroll To Top cho blogger. Không giống như các tùy chọn khác dựa trên Jquery, mình đã phát triển nút này lên đầu trang chỉ sử dụng javascript thuần túy.


Hướng Dẫn Tạo Nút Lên Đầu Trang ( Scroll To Top ) Blogger, Tạo nút Lên đầu trang (Back to top) cho Blogspot, Cách tạo nút lên đầu trang cho Blogspot

Một số Scroll To Top cho blogspot hiện nay rất nhiều và nó đều dựa trên thư viện Jquery để chạy, nếu không có Jquery thì nút lên đầu trang cho blogger sẽ không xuất hiện thì bây giờ mình sẽ hướng dẫn bạn cách tạo nút tải lên đầu trang mà không cần thư viện Jquery nhé và bạn cũng có thể xem cách khắc phục ảnh bị mờ trên blogger

Hướng dẫn tạo nút Scroll to top cho blogspot

Từ bảng điều khiển quản trị Blogger, đi tới Chủ đề> Tùy chỉnh> Tùy chọn nâng cao> CSS tùy chỉnh và tại đây chúng tôi sẽ dán mã css. Hoặc thêm Css Vào <b:skin>
.scrollToTop {outline: none;border: none;font-size: 14px;cursor: pointer;}.scrollToTop svg {display: block;}.scrollToTop {position: fixed;opacity: 0;visibility: hidden;-webkit-transition: visibility .3s, opacity .3s, background .3s, -webkit-transform .3s;transition: visibility .3s, opacity .3s, background .3s, -webkit-transform .3s;transition: transform .3s, visibility .3s, opacity .3s, background .3s;transition: transform .3s, visibility .3s, opacity .3s, background .3s, -webkit-transform .3s;-webkit-transform: translateY(-2em);transform: translateY(-2em);}.scrollToTop.visible {visibility: visible;opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);} 
.scrollToTop svg {
   fill: #FFFFFF; /* color */
}
.scrollToTop {
   background-color: rgba(0, 0, 0, 0.85); /* color de fondo */
   box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 1px 7px rgba(0,0,0,0.25);
   bottom: 1em;
   right: 1em;
   padding: .5em;
   border-radius: 4px;
}
.scrollToTop:hover {
   background-color: rgba(0, 0, 0, 0.95);
}
Sau đó chúng ta lưu lại hoặc áp dụng
Bây giờ chúng ta sẽ đề cập đến Chủ đề > Chỉnh sửa HTML , rồi tìm </body> rồi đặt ở trên
<!-- HTML-->
<button id="scrollToTop" class="scrollToTop">
   <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24">
      <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
   </svg>
</button>
<!-- Javascript -->
<script>//<![CDATA[
var scrollToTop = (function() {
    var showButton = 600,
        scrollSpeed = 1000;
    function scrollTop(b) {
        function a(d) {
            c += Math.PI / (b / (d - e));
            c >= Math.PI && window.scrollTo(0, 0);
            0 !== window.scrollY && (window.scrollTo(0, Math.round(scrollTime + scrollTime * Math.cos(c))), e = d, window.requestAnimationFrame(a))
        }
        var scrollTime = window.scrollY / 2,
            c = 0,
            e = performance.now();
        window.requestAnimationFrame(a)
    }
    var scrollPosition = window.scrollY,
        scrollButton = document.getElementById("scrollToTop");
    window.addEventListener("scroll", function() {
        scrollPosition = window.scrollY;
        showButton < scrollPosition ? scrollButton.classList.add("visible") : scrollButton.classList.remove("visible")
    });
    scrollButton.onclick = function() {
        scrollTop(scrollSpeed)
    }
})();
//]]></script>
Sau đó các bạn lưu lại.

Tùy Chọn Chỉnh Sữa Scroll To Top

ScrollSpeed : Tốc độ di chuyển (1000 = 1 giây)

8 Bình Luận "Hướng Dẫn Tạo Nút Lên Đầu Trang ( Scroll To Top ) Blogger"