JavaScript-錨點應用(Scroll Page by Using Anchor)

說到錨點，最常用的應該是頁面滑到最下面，按個TOP按鈕又回到頁面最上面了吧。

今天我要介紹的應用是:

1.抓出文章關鍵字，加入錨點(add anchor in keyword)

2.在文章內容加入錨點(add anchor in content)

3.點擊關鍵字即滑到內文關鍵字出現之處並改變顏色(click keyword then scroll to keyword in content and highlight keyword )

很像word的ctrl+f搜尋關鍵字的功能吧。

錨點對應有參考這篇:https://stackoverflow.com/questions/39733954/smooth-scroll-using-jquery

但他是置頂，有修改成置中方便閱讀，接下來就開始介紹怎麼寫吧。

程式後端-找到關鍵字與內文並加上錨點(以C#為例)，在本文與highlight的區塊(ASP.NET中我是用Literal)找到關鍵字，對同樣的關鍵字加上同樣的錨點，section+i即是錨點，因此點擊highlight後會呼叫錨點對應與ChangeColor function。

int i = 1;
while(i < keyword.count)
{
     content = content.Replace(sent, "<span id=\"section" + i + "\" class=\" 可以加css\">"

                     + keyword + "</span>"); 

     highlight = highlight + "<a href =\"#section" + i + "\" id=\"" + i + "\"

                        onclick=\"ChangeColor(this.id)\" >" + keyword + "</a><br><br><br>";
      i++;
}         

         
JavaScript錨點對應-點擊section後，把特殊符號取代掉，就去找到span id的位置，網頁會移動到錨點出現位置並置中。

//錨點對應
<script type="text/javascript">
        $(function () {
            $('a[href*=#]:not([href=#])').click(function () {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
                    location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        var scrollto = target.offset().top - (($(window).height() - target.height()) / 2);
                        $('html,body').animate({
                            scrollTop: scrollto
                        });
                        return false;
                    }
                }
            });
        });

</script>

JavaScript改變顏色-if條件裡面包的是要回復成原本顏色的錨點，也就是上一輪點的錨點，而下面的code是對現在點的錨點文字做變色。


<script type="text/javascript">
        function ChangeColor(clickedID) {
            if (window.location.hash != '') {
                var remove = location.hash;
                remove = remove.substr(1);
                document.getElementById(remove).style.color = "#539942";
            }
            var hash = 'section' + clickedID;
            document.getElementById(hash).style.color = "#ff0000";
            window.location.hash = hash;
        }
</script>