当页面太长时，会导致浏览不便，这时就需要一个页面锚点菜单（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);
}
});
//--><!]]>
})();