Page Scroll Menu (页面中锚点菜单)

当页面太长时，会导致浏览不便，这时就需要一个页面锚点菜单（Page Scroll Menu），方便用户快速了解页面的概要及目录并快速定位到相应的目录。

实现方式：

1. 将页面按照内容分成不同的Section, 页面加载时读取各个Section并生成Menu，点击对应的Menu时计算对应Section的位置并设置其位置。

示例 1：http://www.outyear.co.uk/smint/, http://www.outyear.co.uk/smint/demo/

示例 2：http://manos.malihu.gr/page-scroll-to-id

2.  在页面中根据内容插入A标签，定义锚点，在页面加载时收集这些锚点并生成Menu,点击Menu时直接跳转到相应的锚点。

示例 1: http://sympies.com/pagescroll_jquery_menu/

示例 2：HPEMEA项目中的Author模块，主要代码摘录如下：

(function () {    if (window.SideAnchorMenu == undefined) {        window.SideAnchorMenu = function () {            this.isInited = false;        };    }    SideAnchorMenu.PRototype.init = function (showTop, forceInit) {        if (forceInit === false && this.isInited) return;        var anchorMenu;        if ($("#divSideAnchorMenu").size() == 0) {            if (showTop) {                anchorMenu = $("<div><img src='/Modules/Aximpro.DotNetValue.Anchor/Content/Images/axLogo.png' alt='axLogo' id='axlogo' /><br/><hr id='logo-separator'><br/></div><div><ul><li><a href='#'><span></span><div>Top</div></a></li></ul></div>");            }            else {                anchorMenu = $("<div><img src='/Modules/Aximpro.DotNetValue.Anchor/Content/Images/axLogo.png' alt='axLogo' id='axlogo'/><hr id='logo-separator'></div><div><ul></ul></div>");            }            anchorMenu.attr("id", "divSideAnchorMenu");            $("body").append(anchorMenu);        } else {            anchorMenu = $("#divSideAnchorMenu");            anchorMenu.find("ul").empty();        }        var $ul = anchorMenu.find("ul");        var eventHandler = {            anchorMenuItemClick: function () {                $ul.find("li").removeClass("active");                $(this).addClass("active");            },            windowScollHandler: function () {                $ul.find("li").removeClass("active");                var windowScrollTop = $(this).scrollTop();                var windowHeight = $(window).height();                var forcedLi;                $(".anchorMark").each(function () {                    var anchorOffsetTop = $(this).offset().top;                    if (anchorOffsetTop <= windowScrollTop + windowHeight/3) {                        forcedLi = $ul.find("a[href='#" + $(this).attr("id") + "']").parent();                        var bgImage = document.body.style.backgroundImage                        if (document.body.style.backgroundImage.toString().indexOf($(this).attr("id") + ".jpg", 0) == -1) {                            document.body.style.background = "url(/Skins/Single_Page/1.0/backgrounds/" + $(this).attr("id") + ".jpg) no-repeat center center fixed";                            document.body.style.backgroundSize = "cover";                        }                    }                });                if (forcedLi) {                    forcedLi.addClass("active");                } else {                    $ul.find("a[href='#']").parent().addClass("active");                }            }        };        $(".anchorMark").each(function (i, item) {            var $item = $(item);            var anchor = $("<a><span></span><div></div></a>");            anchor.attr("href", "#" + $item.attr("id"));            anchor.attr("class", 'anchor-item');            anchor.find("div").text($item.attr("title"));            var $li = $("<li></li>");            $li.append(anchor);            $ul.append($li);            $li.click(eventHandler.anchorMenuItemClick);        });        //$ul.pagescroll_menu({ "position": "right", "fontfamily": "Forum" });        $(window).scroll(eventHandler.windowScollHandler);        this.isInited = true;    };    <!--//--><![CDATA[//><!--    $(document).ready(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) {                    $('html,body').animate({                        scrollTop: target.offset().top - 150                    }, 800);                    return false;                }            }        });        if (window.SideAnchorMenuInstance == undefined) {            window.SideAnchorMenuInstance = new window.SideAnchorMenu();            window.SideAnchorMenuInstance.init(false);        }    });    //--><!]]>})();