html錨點總結
html
一.思路1
內容區域一定要給滾動臺，然後給滾動條設置寬高為0px,隱藏滾動條，內容的div要給到高度大於屏幕的高度，就可以實現翻頁的效果
一.思路2
如果根據html的滾動條來實現，如果想到達自己制定的位置，可以給相應的padding和margin值，或者是各個塊內放一個空的div，設置需要的寬高即可；
一.思路3
內容區域可以有兩個div，可以讓外面一層的div為隱藏並設置滾動條根據此來滾動，裏面的div為顯示，並且裏裏面的div的寬高大於外面的就可以遮住了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{overflow: hidden;height: 100%;}
*{padding: 0;margin: 0;}ul,li{list-style: none;}a{text-decoration: none;}
.content{min-height: 500px;}
#content1{background: red;}
#content2{background: yellow;}
#content3{background: green;}
#content4{background: pink;}
#content5{background: blue;}
.box{width: 800px;height: 600px;border: 1px solid #bbb;margin-left: 50px;overflow-y: scroll;}
.box::-webkit-scrollbar{width:0px;height: 0px;}
#top{margin-top: 50px;margin-left: 50px;}
#top ul li{float:left;width: 120px;}
</style>
</head>
<body>
<div id="top">
<ul>
<li><a href="#content1">content1</a></li>
<li><a href="#content2">content2</a></li>
<li><a href="#content3">content3</a></li>
<li><a href="#content4">content4</a></li>
<li><a href="#content5">content5</a></li>
</ul>
</div>
<div class="box">
<div id="content">
<div id="content1" class="content">
content1content1content1content1content1content1<br />
content1content1content1content1content1content1<br />
content1content1content1content1content1content1<br />
content1content1content1content1content1content1<br />
</div>
<div id="content2" class="content" style="padding-top: 50px;">
content2<br />
content2content2content2content2content2content2<br />
content2content2content2content2<br />
</div>
<div id="content3" class="content">
content3content3content3content3content3content3<br />
content3content3content3content3content3content3<br />
content3content3content3content3content3content3<br />
</div>
<div id="content4" class="content">
content4content4content4content4content4content4<br />
content4content4content4content4content4content4<br />
content4content4content4content4content4content4<br />
content4content4content4content4content4content4<br />
</div>
<div id="content5" class="content">
content5content5content5content5content5content5<br />
content5content5content5content5content5content5<br />
content5content5content5content5content5content5<br />
</div>
</div>
</div>
</body>
</html>
html錨點總結