jQuery页面整屏滚动

效果展示

jQuery页面整屏滚动

Html代码块

<div id="fullpage" class="fullpage-index">
	<!-- index01 -->
	<div class="indexitem index01 section" id="#page1">
		<img src="img/img01.jpg"/>
	</div>
	<!-- index02 -->
	<div class="indexitem index02 section" id="#page2">
		<img src="img/img08.jpg"/>
	</div>
	<!-- index03 -->
	<div class="indexitem index03 section" id="#page3">
		<img src="img/img03.jpg"/>
	</div>
	<!-- index04 -->
	<div class="indexitem index04 section" id="#page4">
		<img src="img/img07.jpg"/>
	</div>
	<!-- footer -->
	<div class="footer section fp-auto-height">
		<p>人生就是一列开往坟墓的列车，路途上会有很多站，<br/>很难有人可以自始至终陪着走完。<br/>当陪你的人要下车时，即使不舍也该心存感激，<br/>然后挥手道别。</p>
	</div>
	
</div>

<div class="dwlist" id="menu">
	<a data-menuanchor="page1" href="#page1" class="active"><p><span>不工作<br/>身上的魔法就会消失</span></p><strong></strong></a>
	<a data-menuanchor="page2" href="#page2"><p><span>不要忘记你的名字<br/>才能找到回家的路</span></p><strong></strong></a>
	<a data-menuanchor="page3" href="#page3"><p><span>曾经发生过的事情不可能忘记<br/>只不过是想不起而已</span></p><strong></strong></a>
	<a data-menuanchor="page4" href="#page4"><p><span>放心吧<br/>你一定可以做得到的</span></p><strong></strong></a>
</div>

css样式

/* 公用样式 */
html,body{width: 100%;height: 100%;position: relative;}
/* html{overflow-y: scroll;} */
*{margin:0; padding:0;color:#555; font-size:12px; font-family:"microsoft yahei"; line-height:1;font-weight: normal;letter-spacing: 0.3px;list-style:none;font-style: normal;font-size: 100%;}
a,li,ul{list-style:none;text-decoration:none}
ul li a{font-size:16px;color:#333}
body{width:100%;height:100%;position:relative}

.indexitem img{width: 100%;height: 100%;object-fit: cover;}

/* footer */
.footer{width: 100%;background-color: #000;}
.footer p{font-size: 16px;color: #fff;text-align: center;line-height: 30px;padding: 50px 0;}
.fp-auto-height.fp-section,.fp-auto-height .fp-slide,.fp-auto-height .fp-tableCell{ height: auto !important;}

/* dwlist */
.dwlist{position: fixed;right: 90px;bottom: 30%;z-index: 9;overflow:hidden;padding:10px;}
.dwlist a{display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;text-align: right;justify-content: flex-end;-webkit-justify-content: flex-end;opacity:0.5;filter:drop-shadow(0px 1px 3px #656798);margin-bottom: 10px;}
.dwlist a p{font-size: 12px;color: #fff;font-family: Arial;text-transform:uppercase;line-height:18px;overflow:hidden;}
.dwlist a p span{transform:translateX(100%);transition:all .3s;opacity: 0;display:block;color: #fff;font-size: 16px;line-height:24px;}
.dwlist a strong{display: block;width: 8px;height: 50px;box-sizing: border-box;border: 1px solid #fff;transition: all .3s;margin-left: 5px;}
.dwlist a.active{opacity: 1;}
.dwlist a.active strong{background-color: #fff;height: 80px;}
.dwlist a:last-child strong{margin-bottom: 0;}
.dwlist a.active p span{opacity: 1;transform:none;}
.dwlist:hover{opacity:1;}
.dwlist:hover a span{transform: none;opacity:1;}
.dwlist.hide{opacity: 0;visibility: hidden;}

js代码块

<script src="js/jquery.js"></script>
<script src="js/fullPage.js"></script>
<script>
	$('#fullpage').fullpage({
		'navigation': true,
		menu: '#menu',
		anchors: ['page1', 'page2', 'page3', 'page4'],
		afterLoad: function(anchorLink, index){
			var loadedSection = $(this);
			//using index
			console.log(index)
			if(index == 5){
				$(".dwlist").addClass('hide')
			}else{
				$(".dwlist").removeClass('hide')
			}
		}, 
	});
</script>