使用js實現html錨功能，可以任意定位錨的位置，比錨更加靈活

　　今天記錄一個js功能，發現該功能很實用，拿出來跟大家分享。

 　　這里我使用js的window.scrollTo()函數，該函數的用法給大家重復一下,語法為scrollTo(x,y)，這里x表示在窗口文檔顯示區上角顯示的文檔的x坐標，y表示在窗口文檔顯示區上角顯示的文檔的y坐標。所有一般網頁scrollTo(0,n)可以達到縱向的滾動，但我這里用到的是橫向滾動，像win8一樣的效果，使用為scrollTo(n,0)。

　　為了達到點擊導航欄橫向移動到相應的功能模塊，我們把每個功能模塊的div設置一個Id，通過Id獲得該功能模塊距離網頁左邊的位置為多少！我們可以通過元素的offsetLeft屬性獲得，寫成為：document.getElementbyId(id).offsetLeft,那移動到功能模塊位置我們簡單的調用js語句window.scrollTo(document.getElementbyId(id).offsetLeft)就可以做到!如果這么簡單我就不在這里辛苦寫博客記錄這個東西啦！

　　我要達到的效果是“慢慢移動”到這個使用js實現的html錨的地方，錨就是上面說的功能模塊的div，使用該div的Id來操控這個div。那我們如何慢慢的移動到錨的地方呢？這是一個平行移動的效果，當然看來我實現的過程你也可以寫出縱向移動的效果。

　　既然需要從當前的位置移動到指定的位置，我們得知道當前的位置，通過百度一些資料得知window.pageXOffset可以獲取當前橫向滾動條距離坐標的位置。為了從當前位置window.pageXOffset平滑移動到目標位置document.getElementbyId(id).offsetLeft，我們等分之間的距離例如10等分Xoffset10=Math.round((window.pageXOffset-ocument.getElementbyId(id).offsetLeft)/10);每個一段時間添加一次，知道相近的時候停止！

　　最后把代碼給大家，希望能幫助到里，並且理解其中的‘精髓’所在，如果有問題敬請留意。

$(function () {
            $('#Nav li').click(function (e) {
                var divId = $(this).attr('referToDiv');
                var scrollTox = document.getElementById(divId).offsetLeft - document.getElementById("divForumSupport").offsetLeft;
                var pageXOffset = window.pageXOffset;
                Scrollx(pageXOffset, scrollTox);
            });
        });
        var isFirstEnter = true;
        var Xoffset10 , addXoffset;
        function Scrollx(oldXoffset, newXoffset) {
            if (isFirstEnter)
            {
                Xoffset10 = Math.round((newXoffset - oldXoffset) / 10);
                addXoffset = oldXoffset;
                isFirstEnter = false;
            }
            addXoffset+=Xoffset10;
            if ((oldXoffset <= newXoffset) == (addXoffset < newXoffset))
            {
                window.scrollTo(addXoffset, 0);
                window.setTimeout(function () { Scrollx(oldXoffset, newXoffset) }, 1)
            }
            else
            {
                window.scrollTo(newXoffset, 0);
                isFirstEnter = true;
            }
        }

 事例下載地址：http://files.cnblogs.com/zhangxl/Html5Sample1.zip