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
Đăng nhập thành viên
Hãy đăng nhập thành viên để trải nghiệm đầy đủ các tiện ích trên site
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây