Tạo nút trở về đầu trang đơn giản bằng js

Thảo luận trong 'Thủ thuật' bắt đầu bởi hungcuong, 28/11/15.

Lượt xem: 463

  1. hungcuong Thành viên

    Với những trang web có phần nội dung khá dài thì nút Back to Top này giúp người đọc tiết kiệm thời gian khi phải rê chuột lên trên cùng của trang. Đem về áp dụng thử trên Blogspot, thế là có bài đăng mới.
    Chèn đoạn code sau phía trên </body> trong template:
    Mã:
    <style type='text/css'>
    #bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
    #bttop:hover{border:1px solid #ffa789;background:#ff6734;}
    </style>
    <div id='bttop'>BACK TO TOP</div>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
    <script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>
    Hãy kiểm tra lại để xem kết quả nhé :D
    Đang tải...

  2. Bình luận bằng Facebook

Chia sẻ trang này