Hướng dẫn tạo nút link về đầu trang?

 Hỗ trợ sử dụng NukeViet

Tôi đang dung Nukeviet 3.4 và thấy một số trang web có nút link về đầu trang luôn chạy dọc theo bên phải vậy xin hỏi Nukeviet lam như thế nào?
Nhu trang của : Tuổi trẻ, http://quantrimang.com/


Bạn có thể làm theo các bước dưới đây nhé. Khi kéo xuống gần cuối trang thì icon ScollTop sẽ hiện lên, kéo lên nó sẽ mất đi.

Lưu icon này http://quantrimang.com/themes/default/images/scrolltop.png vào thư mục themes/ten-theme/images (có thể thay icon này bằng một icon khác)

Mở themes/ten-theme/css/style.css (hoặc có thể 1 file css dùng chung cho tất cả trang, tùy vào giao diện của bạn), thêm đoạn mã css này vào:

#scrolltop {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    display: none;
    height: 32px;
    width: 32px;
    background: #fff url(../images/scrolltop.png) no-repeat center;
    background-size: 32px;
    cursor: pointer;
    border-radius: 16px;
    opacity: .8;
}

Mở themes/ten-themes/layout/footer_only.tpl
Tìm

</body>

Thêm lên trên

<a id="scrolltop"></a>
<script>
      $("#scrolltop").click(function() {
          $("html,body").animate({
              scrollTop: 0
          }, 800);
          return !1
      });

$(document).scroll(function() {
    var y = $(this).scrollTop();
    if($(window).scrollTop() + $(window).height() > $(document).height() - 300) {
        $('#scrolltop').fadeIn();
    } else {
        $('#scrolltop').fadeOut();
    }
});
</script>

Chúc bạn thành công!


Với NukeViet 3, thay vì mở themes/ten-themes/layout/footer_only.tpl (cái này cho NukeViet 4) thì mở themes/ten-themes/layout/footer.tpl


Cảm ơn bạn Hồ Ngọc Triển đã giúp đỡ. Mình đã thực hiện được rồi.

Bạn cần đăng nhập để tham gia thảo luận

Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.

Powered by NukeViet - a product of VINADES.,JSC