Chào mừng đến với Diễn Đàn Tin Học VN! Hãy chia sẽ những gì bạn biết, và đưa ra thắc mắc của bạn để được giải đáp.

Xem chủ đề cũ hơnGo downXem chủ đề mới hơn
phoenix51706
phoenix51706
Admin
Tổng số bài gửi : 171
Join date : 30/07/2010
https://diendantinhocvn.forumvi.com

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

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
Xem chủ đề cũ hơnVề Đầu TrangXem chủ đề mới hơn
Permissions in this forum:
Bạn không có quyền trả lời bài viết