整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
起html的錨點這個概念，你可能會感到會陌生，感覺自己沒有聽過。但是如果說起它的作用，你可能就恍然大悟了，就像你說起一個演員，可能不知道是誰，但是說起它演的一個角色可能立馬就知道那個人是誰了。
那么，什么是錨點呢？
錨點存在于html中，在默認情況下，可以快速的定位到指定元素，并將元素置于頁面最頂端。當然我們可以按照自己的需求來確定錨點的位置，不一定要讓其定位在頂部。現如今有無數多的頁面已經用上了錨點，比如Vue.js的官網，在我們點擊標題“Vue.js是什么”和標題“起步”的時候，標題都會自動移到頁面頂端。
錨點的使用
那接下來，我們就來看看幾種錨點的使用方法。
id定位
最基本的使用方法如下，當點擊<a>標簽時，頁面會相應的將該div內容置頂
錨點的id定位方法
name定位
除了id，還可以通過name進行定位，不過需要主要的是，如果采用name屬性進行定位的話，只適用于a標簽，類似于p標簽等都不支持。
錨點的name定位方法
javascript代碼進行定位
在原生的javascript中，有一個scrollIntoView()方法，可以實現頁面的錨點
javascript方法實現錨點
一個綜合的例子
講了三種實現方法后，接下來看一個實際運用的例子。首先是實際效果圖，在點擊左側欄時，頁面右邊會相應的顯示指定段落的內容
錨點的實際使用
首先看下html頁面的內容，左側的ul代碼
左側的ul代碼
右側的內容部分代碼
右側內容部分代碼
css部分的代碼
css部分的代碼
將上述的代碼寫在一個html文件中，便可實現左側欄點擊，右側欄顯示相應內容的效果。
特殊情況
在實際項目中，我們總會遇到這樣一種情況，在頁面頂部有固定頭內容的時候，如果直接使用上述方法，會得不到想要的效果
直接使用錨點的效果圖
通過該圖可以看出，第三段內容的標題被遮住了，實際應該往下再顯示一點
那么，我們該怎么解決這個問題呢？在這里我想到了兩種方法，第一種是在每個內容div上加一個隱藏的p元素，給p元素一個定高，再向上偏移，這種方法會導致頁面出現很多個多余的p元素，不推薦使用。
第二種是利用偽元素，偽元素可以占用實際的高度，這是推薦使用的方法
偽元素的樣式
通過給h3標簽添加偽元素樣式，可完美解決這個問題，效果圖如下
使用偽元素后的效果圖
總結
今天的內容你會了么？如果還沒有掌握的話，可以按照文章中的代碼，進行實踐，代碼總是要多敲才更容易理解。
如果喜歡的話，記得關注小編噢，小編后續會堅持出更多技術性的文章，如果有任何問題，也歡迎提問，小編都會盡力解答的。
部分主要涉及兩個內容：置頂和列表分類。
1. 置頂
一般的論壇都會有帖子置頂功能。現在我們在通知類列表中增加置頂功能。
要求置頂在最上，其他按照發布時間降序排列。因此修改表，增加一個sort字段，表示排序，0表示置頂
2. 排序
修改controller類中的getNotices方法。
3. 前端展示
修改NoticeList.vue
4. 字典
上面的例子中，首頁顯示了10條最新通知。這個10是寫在代碼中的，顯然這是不合適的，無法動態修改。解決這個問題的方法是，將這個數據記錄在數據庫中，并可以在程序的后臺管理中（后續開發）動態設置。為此建立一個字典表，記錄這個值。
哪些內容可以放到字典中：
性別。因為性別不會變動，但是用戶信息會用到。
首頁通知條數。每次打開首頁都會用到。允許變動，但很少會變動。
新建dict實體類和jpa接口
新建Constant類，用于記錄數據字典數據的標記，以便在程序各個模塊中保持調用一致。
修改Controller類中的getNotices（）方法
修改數據字典中相應值為5，同時前端界面做了調整
5. 問題列表
展示同學們針對課程的問題和回復。因為課程涉及很多內容，比如Java、Mysql、Tomcat、HTML、JavaScript，還有Spring Boot、VUE、Element UI等，所以對問題，需要進行分類，以便后續的查詢和統計。
Question表
分類表
分類樹
對照表，首頁用不到
回復表
6. Sql語句
這里涉及到了兩個技術問題
Jpa中如何使用原生sql
為返回字段單獨建立一個返回值接口 QuestionIndex。
7. 返回的json數據
8. 前端顯示
、HTML
<div id="ad"></div>
<div id="search">
<div class="search_box">
<input type="text" class="search_txt" />
<input type="button" value="搜索" class="search_btn" />
</div>
</div>
<div id="box"></div>
二、CSS
*{
padding: 0px;
margin: 0px;
list-style: none;
}
#ad{
width: 100%;
height: 80px;
background: #142DA8;
}
#search{
width: 1300px;
height: 40px;
margin:0 auto;
border:1px solid black;
background: #25B3D9;
position: absolute;
top:80px;
left: 24px;
z-index: 2;
}
#search .search_box{
width: 800px;
margin: 0 auto;
}
#search .search_txt{
display: block;
width: 600px;
height: 36px;
border:2px solid red;
margin:0 auto;
float: left;
}
#search .search_btn{
margin-left: 5px;
font-size: 24px;
line-height: 38px;
float: left;
border:1px solid blue;
}
#box{
width:1300px;
height: 2000px;
background: #858282;
position: absolute;
left: 24px;
top:120px;
}
三、script
window.onscroll=function(){
var oSearch=document.getElementById('search');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if (parseInt(scrollTop)>200) {
oSearch.style.position='fixed';
oSearch.style.top='0px';
}
else{
oSearch.style.position='absolute';
oSearch.style.top='80px';
}
}
四、效果圖
此方法是本人想到的，不知道大伙還有沒有其他好的方法，請留言！！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
