摘要：但是就頁面定位到指定位置其實(shí)還有更好的辦法，就是使用去獲取指定位置的，這樣的話還可以加滑動(dòng)動(dòng)畫，使定位的這個(gè)過程比較平滑。

頁面上有一排按鈕，懸浮在窗口頂端，不隨頁面滑動(dòng)而滑動(dòng)，這一組按鈕分別對應(yīng)的是頁面的各個(gè)部分，點(diǎn)擊按鈕，頁面定位到對應(yīng)的位置。

拿到這個(gè)需求，很自然的想到，解決這個(gè)最簡單的方法是使用錨點(diǎn)（能靠HTML和css解決的，盡量不使用js

想到使用錨點(diǎn)事情就比較簡單了，借用a標(biāo)簽的href定位，很快就寫了一個(gè)Demo，
完整代碼：https://codepen.io/yangyang11...
關(guān)鍵代碼：

  

    錨點(diǎn)1
    錨點(diǎn)2
    錨點(diǎn)3
  
  
anchor1
  
anchor2
  
anchor3

這時(shí)候，點(diǎn)擊懸浮的button，頁面可以實(shí)現(xiàn)快速定位。

點(diǎn)了幾遍之后立馬就發(fā)現(xiàn)了一個(gè)坑，因?yàn)榘粹o是懸浮的，而錨點(diǎn)定位，默認(rèn)是定位到窗口頂端，這樣定位到的區(qū)域就會(huì)有一部分被懸浮的按鈕擋住
如下圖：
原始狀態(tài)：

點(diǎn)擊“錨點(diǎn)1”按鈕之后（黃色框起來的部分就是被遮蓋起來的部分）：

由此引出一個(gè)問題，怎么使a標(biāo)簽的錨點(diǎn)不定位到窗口最頂端?

網(wǎng)上搜了一些方法，其中有提到使用:target，主要添加幾行css

#anchor1:target, #anchor2:target, #anchor3:target {
  padding-top: 100px;  // 這里更改padding-top的值使其定位到不同地方
}

效果如下圖：

雖然可以實(shí)現(xiàn)文字的不被遮擋，但是實(shí)際上，對于固定大小的div來說，很容易影響div的內(nèi)部布局，故不適用我這里的情況（然而這里的:target在其他地方作用還是非常大的。

換別的思路，想了個(gè)巧辦法，在每個(gè)需要定位的節(jié)點(diǎn)前面加一個(gè)輔助節(jié)點(diǎn)，輔助節(jié)點(diǎn)的高度可以自定，錨點(diǎn)的實(shí)際定位的是這個(gè)輔助節(jié)點(diǎn)
完整代碼：https://codepen.io/yangyang11...
關(guān)鍵代碼：

  

    錨點(diǎn)1
    錨點(diǎn)2
    錨點(diǎn)3
  
  

    
    

    anchor1
  
  

    

    anchor2
  
  

    

    anchor3
  
輔助節(jié)點(diǎn)的css:
.assist-div {
  width: 1px;
  height: 1px;
  position: absolute;
  top: -100px; // 這里可以設(shè)任意高度 對應(yīng)錨點(diǎn)最后離窗口頂端的距離
  left: 0;
}

這個(gè)方法的優(yōu)點(diǎn)：
(一)輔助節(jié)點(diǎn)可以絕對定位 不影響布局
(二)改變輔助節(jié)點(diǎn)的top值 可以實(shí)現(xiàn)錨點(diǎn)定位到窗口任意位置
最后效果截圖：(點(diǎn)擊了“錨點(diǎn)2“按鈕)

正當(dāng)我美滋滋的交付任務(wù)，坐等1h之后的聚餐的時(shí)候，PM來找我說，不行，移動(dòng)端打開的時(shí)候，我切換點(diǎn)了幾下懸浮的按鈕之后，要點(diǎn)很多下返回鍵才能退出頁面。
我：對啊因?yàn)槊奎c(diǎn)一次按鈕就在瀏覽器記錄里面添加一條記錄
PM：這不行 需要解決掉
。。。
這是個(gè)問題，需要用戶點(diǎn)擊很多下才能退出頁面體驗(yàn)確實(shí)不好，如果想要用戶點(diǎn)擊一次就退出頁面，就得始終保持history只有一條記錄，但是a標(biāo)簽跳轉(zhuǎn)的話自動(dòng)往history加一條記錄，我也不能對此做什么。
。。。
這時(shí)候不得不使用js了，
我盯著錨點(diǎn)看了會(huì)兒(實(shí)際上看了半小時(shí):) )發(fā)現(xiàn):

例如http://shili.com/Demo.html#content1 這樣的url，是可以直接定位到http://shili.com/Demo.html 這個(gè)頁面的id為content1的節(jié)點(diǎn)處的，這樣的話，我不使用a標(biāo)簽，直接使用js去動(dòng)態(tài)改變url后面的#id 的id，也可以實(shí)現(xiàn)定位的效果，并且還能實(shí)現(xiàn)瀏覽器只保存一條記錄。

完整代碼：https://codepen.io/yangyang11...
關(guān)鍵代碼：

去除a標(biāo)簽，改為使用div，并添加click：

    
錨點(diǎn)1
    
錨點(diǎn)2
    
錨點(diǎn)3

  function goToAnchor(anchorId) {
    // 使用replace方法可以保證前一次瀏覽不會(huì)在瀏覽器中保留記錄
    window.location.replace(window.location.href.split("#")[0] + anchorId);
  }

至此，需求就完成了。
但是就頁面定位到指定位置其實(shí)還有更好的辦法，就是使用js去獲取指定位置的offsetTop，這樣的話還可以加滑動(dòng)動(dòng)畫，使定位的這個(gè)過程比較平滑。我沒有使用這個(gè)方法是因?yàn)椋晃议_始就一心想使用錨點(diǎn)結(jié)果只能遇坑填坑，二我的頁面中有很多折疊的部分（類似于手風(fēng)琴效果），所以每次的offsetTop都可能是不一樣的，點(diǎn)擊時(shí)都需要去獲取offsetTop的值再移動(dòng)，比較麻煩而且耗性能。（emmm雖然我一開始就抗拒使用js去解決，最后還是使用了，但是抉擇之下還是使用性能消耗小的比較好
這里也丟一下采用上面這個(gè)方法的關(guān)鍵代碼

document.getElementById("content").scrollTop = document.getElementById(anchorId).offsetTop - 100;

2019.3.26日更新
使用js去實(shí)現(xiàn)的話，還有一種方法，使用：Element.scrollIntoView方法，我試了下，這個(gè)方法也很好用，還可以自定義滑動(dòng)方式，性能上，相較于上面的js方法要好，代碼如下：