結合錨點利用滾動條監聽跳轉
阿新 • • 發佈：2017-12-13
關於 家居 col eat span tom odi ack 分享 
每一個錨點都相當於一個完整的模塊，正好占滿一個屏幕，滾動可以直接跳轉錨點，
<body> <!--頭部開始--> <div id="header"> <div id="hlogo"> <div id="hlogo1"> 家維網 </div> <span id="hlogot">讓家居服務更簡單</span> </div> <divView Codeid="hzhan"></div> <div id="hnav"> <div id="hnavtop"> <div class="hnt">地圖</div> <div class="hnt">註冊</div> <div class="hnt">登錄</div> </div> <div id="hnavbuttom"> <div class="hnb">首頁</div> <div class="hnb">解決方案</div> <div class="hnb">專業維修</div> <div class="hnb">共享服務</div> <div class="hnb">知識分享</div> <div class="hnb">關於我們</div> </div> </div> </div> <!--頭部結束--> <!--內容開始--> <div id="zhuti"> <div id="maodian"> <a href="#a1"><div class="md"></div></a> <a href="#a2"><div class="md"></div></a> <a href="#a3"><div class="md"></div></a> <a href="#a4"><div class="md"></div></a> </div> <a name="a1"></a> <div id="ztn1"></div> <a name="a2"></a> <div id="ztn2"></div> <a name="a3"></a> <div id="ztn3"></div> <a name="a4"></a> <div id="ztn4"></div> </div> <div id="footer"></div> </body>
css樣式：
*{ margin:0 auto;padding:0;} body{background-color:#999;} #yemei{width:100%;height:20px;background-image:url(../images/bg.png);} /*頭部開始*/ #header{width:100%;height:120px;position:fixed;top:0px;background-color:#000;opacity:0.7;-moz-opacity:0.7;} #hlogo{width:200px;height:120px;margin-left:50px;float:left;} #hlogo1{width:170px;height:100px;background-image:url(../images/logo2.png);background-repeat:no-repeat;background-position:25px;line-height:120px;font-size:30px;color:#fff;text-align:right;} #hlogot{color:#fff;line-height:20px;font-size:16px;position:relative;top:-10px;left:45px;} #hzhan{width:400px;height:100%;float:left;} #hnav{width:600px;height:100%;float:left;} #hnavtop{width:100%;height:40px;} .hnt{width:40px;height:100%;line-height:40px;color:#fff;text-align:center;float:right;margin-right:15px;} #hnavbuttom{width:100%;height:80px;} .hnb{width:100px;height:100%;line-height:80px;color:#fff;text-align:center;float:left;font-size:18px;} /*頭部結束*/ /*內容開始*/ #zhuti{width:100%;height:2648px;background-color:#CCC;} #maodian{ width:50px; height: 300px; position:fixed; right:10px; top:150px;} .md{ width:30px; height:30px; border-radius:50%; background-color:#fff; margin-bottom:10px;} #ztn1{ width:100%; height:662px; background-color:#00F;} #ztn2{ width:100%; height:662px; background-color:#f00;} #ztn3{ width:100%; height:662px; background-color:#0f0;} #ztn4{ width:100%; height:662px; background-color:#f60;} /*內容結束*/ #footer{width:100%;height:120px;background-image:url(../images/bg1-.png);} #yejiao{width:100%;height:20px;background-image:url(../images/bg.png);}View Code
js:
var ztn1 = document.getElementById("ztn1"); var ztn2 = document.getElementById("ztn2"); var ztn3 = document.getElementById("ztn3"); var ztn4 = document.getElementById("ztn4"); var md = document.getElementsByClassName("md"); window.onscroll = function() { var sry = window.scrollY; if(sry<10 && sry>1) { window.scroll(0,662); } if(sry<662 && sry>642) { window.scroll(0,0); } if(sry<682 && sry>662) { window.scroll(0,1324); } if(sry<1324 && sry>1304) { window.scroll(0,662); } if(sry<1344 && sry>1324) { window.scroll(0,1986); } if(sry<1986 && sry>1966) { window.scroll(0,1324); } }View Code
結合錨點利用滾動條監聽跳轉