Hướng dẫn tạo scroll fullpage

Thêm đoạn mã sau vào header


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css">
<style>
        @media only screen and (max-width: 600px) {
            .fullpage {
                display: none;
            }
        }
    </style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Thêm đoạn mã sau vào footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
<script>
    if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        new fullpage('.fullpage', {
            autoScrolling: true,
            navigation: true,
            navigationPosition: 'right',
            anchors: ['chao-mung', 'tong-quan','vi-tri', 'trai-nghiem','nha-mau', 'mat-bang-tien-tich', 'tien-ich', 'ly-do-so-huu', 'dang-ky',],
         	navigationTooltips: ['Chào mừng','Tổng quan','Vị trí','Trải nghiệm','Nhà mẫu','Mặt bằng tiện ích','Tiện ích','Lý do sở hữu','Đăng ký' ,],
       		showActiveTooltip: true,
        	menu: '#menu',
        	loopTop: true,
        	loopBottom: true,
                // thêm đoạn mã dưới đây để xử lý xung đột nếu bạn dùng Aos animation
		onLeave: function(){
			jQuery('.section [data-aos]').removeClass("aos-animate");
			},
		        onSlideLeave: function(){
			jQuery('.slide [data-aos]').removeClass("aos-animate");
			},
			afterSlideLoad: function(){
			jQuery('.slide.active [data-aos]').addClass("aos-animate");
			},
		        afterLoad: function(){
			jQuery('.section.active [data-aos]').addClass("aos-animate");
			}
		  });
		},
</script>
Chat zalo
Chat whatapp
Liên hệ chúng tôi