hash
hash 屬性是乙個可讀可寫的字串，該字串是 url 的錨部分（從 # 號開始的部分）。錨點location.hash=anchorname。
錨點是網頁製作中超級鏈結的一種，又叫命名錨記。命名錨記像乙個迅速定位器一樣，是一種頁面內的超級鏈結
錨點1 錨點2
錨點1錨點2
#anchor1雖然可以直接定位到制定的位置，但是效果很差，沒有平緩的過渡效果。
1）前期理論準備
既然hash值是對應錨點的id值，那如果改為js動態獲取hash值，然後再根據hash值獲得dom物件。最後，用js進行平緩過渡。
基於這個思路，就必須要求hash的取名有獨特性，不能跟頁面中的任何乙個id一致，否則會觸發瀏覽器預設的錨點定位行為。
2）確定特殊hash命名
hash命名直接取特殊的字首：w_，比如錨點1對應的hash值為w_anchor1
錨點1 錨點2
間隔1間隔2間隔3
間隔4間隔5
間隔6間隔7
間隔8錨點1
間隔1間隔2
間隔3間隔4
間隔5間隔6
間隔7間隔8
錨點2間隔1
間隔2間隔3
間隔4間隔5
間隔6間隔7
間隔8
3）編寫讀取特殊hasn值的方法以及緩動方法(本示例不考慮相容性)
(function(window, undefined);
// 監聽位址列url的hash值改變時，檢查是否需要定位錨點
window.onhashchange = function();
// 滾動到自定義的偽錨點
function scrolltoanchor()
anchordom = getdom(anchor);
anchorscrolltop = anchordom.offsettop;
animationtoanchor(document.body.scrolltop, anchorscrolltop);
} /*
@function 滾動到指定位置方法
@param startnum -- 開始位置
@param stopnum -- 結束位置
*/function animationtoanchor(startnum, stopnum)
// 緩動方法
window.requestanimationframe(function()
animationtoanchor(nownum, stopnum); // 只要還符合緩動條件，則遞迴呼叫
});} // 獲取錨點id
function getanchor(str)
// 判斷是否為特殊的hash值，也即是否為偽錨點
function checkanchor(str)
// 獲取hash值
function gethash()
// 獲取dom物件
function getdom(id)
})(window);
錨點1 錨點2
間隔1間隔2間隔3
間隔4間隔5
間隔6間隔7
間隔8錨點1
間隔1間隔2
間隔3間隔4
間隔5間隔6
間隔7間隔8
錨點2間隔1
間隔2間隔3
間隔4間隔5
間隔6間隔7
間隔8
更多專業前端知識，請上
【猿2048】www.mk2048.com
定位與錨點
只能用定位來實現層疊的效果 absolute預設為瀏覽器視窗 position static absolute relative fixed inherit 1.static 預設定位方式 2.absolute 絕對定位，將物件從文件流中完全脫離出來，使用left right top bottom進...
定位錨點透明
position定位屬性和屬性值 定位元素的層級屬性 包含塊的概念和應用 錨點連線的語法和應用場景 透明屬性的應用 擴充套件 marquee 滾動字幕 position定位屬性 告訴瀏覽器這是定位屬性 語法 position static absolute relative fixed 取值 1 s...
jQuery實現頁面錨點滾動效果
核心 html,body animate 1500 讓滾動條在指定時間內，滾動到指定元素的位置。scrolltop 相對滾動條頂部的偏移 offset獲取元素偏移量.top表示獲取元素距離頂端的位置，left表示獲取元素距離左側的位置 第一章第二章 第三章第一章 第一章節內容 第一章節內容 第一章節...