Share
View previous topicGo downView next topic
avatar
Admin
Tổng số bài gửi : 122
Join date : 2010-07-30
View user profilehttp://diendantinhocvn.roll.tv

Nút trở lại đầu trang cho forumotion

on 02/12/17, 02:03 pm
Với những forum và bài viết dài thiệt là dài, mỗi khi muốn lên đầu trang phải bấm con chuột kéo lên trên hoặc phải bấm phím nóng về về đầu trang ngay lập tức.
Nhưng bạn thuộc típ những kẻ lười biếng chỉ muốn nắm duy nhất con chuột và nhấp một cái là có thể quay lại đầu trang ngay lập tức.
Nút "back to top" dưới đây sẽ đáp ứng được cho kẻ lười biếng như bạn, chỉ cần click chuột là nó chạy cái vù về đâu trang cho bạn ngay.

Bước 1:

Vào Bảng điều khiển của Người Quản Trị --> Display --> Quản lý tổng thể (trong phần template)--> click chuột vào overall_header

Copy đoạn scritp dưới đây vào trước thẻ và bấm lưu lại

Code:
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

Bước 2:

Vào Bảng điều khiển của Người Quản Trị --> Modules --> chọn Javascript codes management trong mục HTML & JAVASCRIPT --> click chuột vào Create a new javascript

Title * : điền tiêu đề mà bạn muốn (ví dụ: Back to top)
Placement : chọn In all the pages
Javascript Code * : dán đoạn code dưới đây vào

Code:
$(function() {
      $(window).scroll(function() {
          if($(this).scrollTop() != 0) {
            $('#backtotop').fadeIn();
         } else {
            $('#backtotop').fadeOut();
          }
      });
  
     $('#backtotop').click(function() {
          $('body,html').animate({scrollTop:0},800);
      });
   });

Rồi bấm lưu lại

Bước 3:

Vào Bảng điều khiển của Người Quản Trị --> Display --> Quản lý tổng thể (trong phần template)--> click chuột vào overall_footer_end

Dán đoạn code dưới đây vào phía trên thẻ rồi lưu lại

Code:
<!--[Start] Back to Top-->
<div id="backtotop"><i class="fa fa-arrow-circle-up fa-2x"></i></div>  

Bước 4:

Vào  Bảng điều khiển của Người Quản Trị --> Display --> chọn Colors (trong Pictures and Colors
)


Click chuột vào tab "CSS Stylesheet" và dán đoạn CSS bên dưới vào ô bên dưới nó.

Code:
#backtotop {
    bottom: 50px;
    color: #FFFFFF;
    cursor: pointer;
    display: none;
    font-size: 14px;
    padding: 8px 10px;
    position: fixed;
    text-align: center;
    z-index: 999;
    right: 10px;
    background-color : #369fcf;
    border-radius : 8px;
    -webkit-border-radius : 8px;
    -moz-border-radius : 8px;
}
#backtotop:hover {
    background-color:orange;
}


Vậy là xong rồi đó, muốn xem demo thì nhìn forum của tui là biết liền chớ gì.
Twisted Evil Twisted Evil Twisted Evil Twisted Evil
View previous topicBack to topView next topic
Permissions in this forum:
You cannot reply to topics in this forum